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端支持性需要格外注意。
