CSS3动画性能优化——让硬件加个速

最近翻阅了很多有关CSS3动画性能优化的技术博客，学到了很多东西，受益匪浅啊。多花一点时间也要把这篇文章撸出来。毕竟是干货满满的经验总结。

浏览器渲染主流程

当我们的渲染引擎取得了我们的文档内容之后它的基本流程是这样实现的：
解析html以构建树形的数据结构（dom tree） > 构建render树 > 布局render树 > 绘制render树
若对render树不清楚的，可以去看Render树与CSS解析

主线程的渲染流程，可以参考大部分浏览器渲染网页的流程：

• 使用 HTML 创建文档对象模型（DOM）
• 使用 CSS 创建 CSS 对象模型（CSSOM）
• 基于 DOM 和 CSSOM执行脚本（Scripts）
• 合并 DOM 和 CSSOM 形成渲染树（Render Tree）
• 使用渲染树布局（Layout）所有元素
• 渲染（Paint）所有元素

也就是说，主线程每次都需要执行Scripts，Render Tree ,Layout和Paint这四个阶段的计算。

动画卡顿的原因

导致这样动画卡顿的原因：主线程和合成线程调度不合理。
当我们把left、right、top、bottom设置为transition的值，会造成浏览器负担压力很大。
举个栗子
我们设置为margin-right：-30px渲染到0px。那么它的主线程会渲染从30-29-28-…-0.这样主线程就渲染了30次。再加上，合成主线程之后会绘制到GPU上再渲染到页面上。所以就是进行了30次主线程渲染，30次合成线程渲染，就是60次运算！

你这样做出来的动画，基本上都是卡顿状。这也是理所当然的，计算量这么大。