一、每一帧动画浏览器可能需要做如下工作：
计算需要被加载到节点上的样式结果（Recalculate style--样式重计算）
为每个节点生成图形和位置（Layout--回流和重布局）
将每个节点填充到图层中（Paint Setup和Paint--重绘）
组合图层到页面上（Composite Layers--图层重组）
【如果我们需要使得动画的性能提高，需要做的就是减少浏览器在动画运行时所需要做的工作。最好的情况是，改变的属性仅仅印象图层的组合，变换（transform）和透明度（opacity）就属于这种情况】
二、transform变换是你的选择
我们通过节点的transform可以修改节点的位置、旋转、大小等。我们平常会使用left和top属性来修改节点的位置，但正如上面所述，left和top会触发重布局，修改时的代价相当大。取而代之的更好方法是使用translate，这个不会触发重布局
三、由于GPU的参与，现在用来做动画的最好属性是如下几个：
opacity
translate
rotate
scale
四、页面渲染过程
1.javascript/css设置动画或变换
2.【计算样式】
根据css选择器，对每个DOM元素匹配对应的CSS样式。
从而确定每个DOM元素上应该应用什么CSS样式规则。
3.【布局】
计算每个DOM元素最终在屏幕上显示的大小和位置。
4.【绘制】
本质上就是填充像素的过程。
包括绘制文字、颜色、图像、边框和阴影等，也就是一个DOM元素所有的可视效果。
一般来说，这个绘制过程是在多个层上完成的。
5.【渲染层合并】
在每个层上完成绘制过程之后，浏览器会将所有层按照合理的顺序合并成一个图层，
然后在屏幕上呈现。
五、回流
【定义】当Render Tree中的一部分（或全部）因为元素的尺寸、布局、隐藏等改变而需要重新构建。这就称为回流。
在Web页面中，很多状况下会导致回流：
调整窗口大小
改变字体
增加或者移除样式表
内容变化
激活CSS伪类
操作CSS属性
JavaScript操作DOM
计算 offsetWidth 和 offsetHeight
设置 style 属性的值
CSS3 Animation或Transition
六、重绘
重绘（Repaint）不一定会引起回流（Reflow重排），但回流必将引起重绘（Repaint）。
会触发浏览器的Repaint和Reflow的情况：
页面首次加载
DOM元素添加、修改(内容)和删除(Reflow + Repaint)
仅修改DOM元素的颜色(只有Repaint，因为不需要调整布局)
应用新的样式或修改任何影响元素外观的属性
Resize浏览器窗口和滚动页面
读取元素的某些属性( offsetLeft 、 offsetTop 、 offsetHeight 、 offsetWidth 、 getComputedStyle() 等)
七、为什么开启硬件加速动画就会变得流畅
因为每个页面元素都有一个独立的Render进程。Render进程中包含了主线程和合成线程。
【主线程】负责：
JavaScript的执行
CSS样式计算
计算Layout
将页面元素绘制成位图(Paint)
发送位图给合成线程
【合成线程】则主要负责：
将位图发送给GPU
计算页面的可见部分和即将可见部分(滚动)
通知GPU绘制位图到屏幕上(Draw)
我们可以将页面绘制的过程分为三个部分：Layout、Paint和合成。
Layout负责计算DOM元素的布局关系
Paint负责将DOM元素绘制成位图
合成则负责将位图发送给GPU绘制到屏幕上（如果有 transform 、 opacity 等属性则通知GPU做处理）。
八、RenderLayer 树
满足以下任意一点的就会生成独立一个 RenderLayer：
页面的根节点的RenderObject
有明确的CSS定位属性（ relative ， absolute 或者 transform ）
是透明的
有CSS overflow、CSS alpha遮罩（alpha mash）或者CSS reflection
有CSS 滤镜（fliter）
3D环境或者2D加速环境的canvas元素对应的RenderObject
video元素对应的RenderObject
每个RenderLayer 有多个 GraphicsLayer 存在
有3D或者perspective transform的CSS属性的层
使用加速视频解码的video元素的层
3D或者加速2D环境下的canvas元素的层
插件，比如flash（Layer is used for a composited plugin）
对 opacity 和 transform 应用了CSS动画的层
使用了加速CSS滤镜（filters）的层
有合成层后代的层
同合成层重叠，且在该合成层上面（z-index）渲染的层
网友评论