从浏览器渲染层面分析css3动效优化原理本主题：减少页面DOM操作，无需添加一行js代码即可使用CSS实现动效使用绝对定位将DOM与文档流分离，减少页面重排（relayout)使用CSS33D属性启用硬件加速那么，CSS3和动态优化有什么关系呢？本文将从浏览器渲染层面来讲述CSS3动态优化原理。浏览器页面显示进程主页。我们需要了解浏览器页面显示流程：Javascript：主要负责业务交互逻辑。样式：根据CSS选择器，为每个DOM元素匹配对应的CSS样式。布局：具体计算显示在屏幕上的DOM元素的大小和位置。Paint：实现一个DOM元素的视觉效果（颜色、边框、阴影等），一般由多个渲染层完成。Composite：每层绘制完成后，浏览器会将所有层按照合理的顺序合并为一层显示在屏幕上。在本文中，我们将重点介绍Composite过程。浏览器渲染原理在讨论Composite之前，我们需要了解一下浏览器渲染的原理。从这张图中我们可以发现DOM元素和LayoutObjects是一一对应的。一般来说，具有相同坐标空间的LayoutObjects属于同一个PaintLayer（渲染层），可以通过position、opacity、filter等CSS属性创建新的PaintLayer。一些特殊的PaintLayer会被认为是CompositeLayer（复合层/复合层），CompositeLayer有单独的GraphicsLayer（图形层），那些不是CompositeLayer的PaintLayer，会和父层共享一个GraphicsLayer拥有图形层。我们日常生活中看到的屏幕视觉效果可以理解为：由GPU合成的多个位图渲染到屏幕上，而位图的最小单位是像素。如下图：那么如何获取位图，GraphicsLayer起着关键作用，每个GraphicsLayer都有一个GraphicsContext，位图存储在共享内存中，GraphicsContext会负责将位图作为纹理上传到在GPU中，合成渲染由GPU执行。如下图所示：CSS在浏览器渲染层面起到什么作用？大多数人对CSS3的第一印象是可以通过3D（如transform）属性启用硬件加速。很多同学在重构某个项目的时候都会考虑。动画性能问题会倾向于：把2Dtransform改成3Dtransform2。将左（上、下、右）的移动改为3Dtransform，但启用硬件加速的底层原理实际上是将PaintLayer升级为CompositeLayer。使用相同的效果：3D属性启用硬件加速（3d-transform）will-change：（opacity,transform,top,left,bottom,right）使用fixed或sticky定位来应用动画（active）或opacity，transform，filtertransition(active)，注意这里的动画和transition需要处于active状态。下面写两段demo代码，带大家实际分析一下demo1。3D属性启用硬件加速(3d-transform).composited{width:200px;高度：200px；背景：红色；transform:translateZ(0)}
