CSS animations 和 transitions的性能问题

现代的浏览器通常会有两个重要的执行线程，这2个线程协同工作来渲染一个网页：

• 主线程
• 合成线程

一般情况下，主线程负责：

• 使用HTML创建文档对象模型（DOM）
• 使用CSS创建CSS对象模型（CSSOM）
• 基于DOM和CSSOM执行脚本（Scripts）
• 合并DOM和CSSOM形成渲染树（Render Tree）
• 使用渲染树布局（Layout）所有元素
• 将元素绘制（Paint）到一个或多个位图中
• 将这些位图交给合成线程

相应地，合成线程负责：

• 通过GPU将位图绘制到屏幕上
• 通知主线程更新页面中可见或即将变成可见的部分的位图
• 计算出页面中哪部分是可见的
• 计算出当你在滚动页面时哪部分是即将变成可见的
• 当你滚动页面时将相应位置的元素移动到可视区域

长时间执行JavaScript或渲染一个很大的元素会阻塞主线程，在这期间，它将无法响应用户的交互。

相反，合成线程则会尽量去响应用户的交互。当一个页面发生变化时，合成线程会以每秒60 帧的间隔去不断重绘这个页面，即使这个页面不完整。

当用户滚动页面时，合成线程会通知主线程更新页面中最新可见部分的位图。但是，如果主线程响应地不够快，合成线程不会保持等待，而是马上绘制已经生成的位图，还没准备好的部分用白色进行填充。

GPU

目前，大多数手机、 平板电脑、 和计算机都配备了GPU芯片。它有着非常专业的定位，这意味着GPU非常擅长做某些事情（比如绘图），但在其他方面则没什么优势。

动画卡顿现象

那么为什么会造成动画卡顿呢？原因就是主线程和合成线程的调度不合理。

卡顿说明

在使用height，width，margin，padding作为transition的值时，会造成浏览器主线程的工作量较重，例如从margin-left：-20px渲染到margin-left:0，主线程需要计算样式margin-left:-19px,margin-left:-18px，一直到margin-left:0，而且每一次主线程计算样式后，合成进程都需要绘制到GPU然后再渲染到屏幕上，前后总共进行20次主线程渲染，20次合成线程渲染，20+20次，总计40次计算。

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

• 基于DOM和CSSOM执行脚本（Scripts）
• 合并DOM和CSSOM形成渲染树（Render Tree）
• 使用渲染树布局（Layout）所有元素
• 将元素绘制（Paint）到一个或多个位图中

而如果使用transform的话，例如tranform:translate(-20px,0)到transform:translate(0,0)，主线程只需要进行一次tranform:translate(-20px,0)到transform:translate(0,0)，然后合成线程去一次将-20px转换到0px，这样的话，总计1+20计算。

css3动画卡顿的解决方案：

在使用css3 transtion做动画效果时，优先选择transform，尽量不要使用height，width，margin和padding。

transform为我们提供了丰富的api，例如scale，translate，rotate等等，但是在使用时需要考虑兼容性。但其实对于大多数css3来说，mobile端支持性较好，desktop端支持性需要格外注意。

参考文章

深入浏览器理解CSS animations 和 transitions的性能问题
CSS3动画卡顿性能优化解决方案