css动画优化笔记

一、每一帧动画浏览器可能需要做如下工作：

1. 计算需要被加载到节点上的样式结果（Recalculate style--样式重计算）
2. 为每个节点生成图形和位置（Layout--回流和重布局）
3. 将每个节点填充到图层中（Paint Setup和Paint--重绘）
4. 组合图层到页面上（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）渲染的层