前端性能优化（css动画篇）

1、原理：

css3动画绘制效率高的方法：

☆改变位置

☆改变大小

☆旋转

☆改变透明度

2、CSS的图层的概念（Chrome浏览器）

（1）浏览器所做的工作实际上是：

• 获取DOM后分割为多个图层
• 对每个图层的节点计算样式结果（Recalculate style--样式重计算）
• 为每个节点生成图形和位置（Layout--回流和重布局）
• 将每个节点绘制填充到图层位图中（Paint Setup和Paint--重绘）
• 图层作为纹理上传至GPU
• 符合多个图层到页面上生成最终屏幕图像（Composite Layers--图层重组

（2）Chrome中满足以下任意情况就会创建图层

•  3D或透视变换（perspective transform）CSS属性
• 使用加速视频解码的<video>节点
• 拥有3D（WebGL）上下文或加速的2D上下文的<canvas>节点
• 混合插件（如Flash）
• 对自己的opacity做CSS动画或使用一个动画webkit变换的元素
• 拥有加速CSS过滤器的元素
• 元素有一个包含复合层的后代节点（一个元素拥有一个子元素，该子元素在自己的层里）
• 元素有一个z-index较低且包含一个复合层的兄弟元素（换句话说就是该元素在复合层上面渲染）

如果我们需要使得动画的性能提高，需要做的就是减少浏览器在动画运行时所需要做的工作。最好的情况是，改变的属性仅仅印象图层的组合，变换（transform）和透明度（opacity）就属于这种情况

3、触发重布局的属性

（1）盒子相关属性会触发布局

width、height、padding、margin、display、border-width、border、min-height

（2）定位属性及浮动也会触发重布局

top、bottom、left、bottom、position、float、clear

（3）改变节点内部文字结构也会触发重布局

 text-align、overflow-y、font-weight、overflow、font-family、 line-height、vertival-align、white-space、font-size

4、触发重绘的属性

color、border-style、 border-radius、visibility、text-decoration、background、 background-image、background-position、background-repeat、background-size、 outline-color、outline、 outline-style、 outline-width、box-shadow

5、js动画与css动画对比

JS动画

缺点：JavaScript在浏览器的主线程中运行，而其中还有很多其他需要运行的JavaScript、样式计算、布局、绘制等对其干扰。这也就导致了线程可能出现阻塞，从而造成丢帧的情况。

优点：JavaScript的动画与CSS预先定义好的动画不同，可以在其动画过程中对其进行控制：开始、暂停、回放、中止、取消都是可以做到的。而且一些动画效果，比如视差滚动效果，只有JavaScript能够完成

CSS动画

缺点：缺乏强大的控制能力。而且很难以有意义的方式结合到一起，使得动画变得复杂且易于出问题。
优点：浏览器可以对动画进行优化。它必要时可以创建图层，然后在主线程之外运行。

结论：

动画给予了页面丰富的视觉体验。我们应该尽力避免使用会触发重布局和重绘的属性，以免失帧。最好提前申明动画，这样能让浏览器提前对动画进行优化。由于GPU的参与，现在用来做动画的最好属性是如下几个：
* opacity
* translate
* rotate
* scale