浏览器内部两个重要的线程
- 主线程
- 合成线程
一般情况下，主线程负责：
- Javascript
- 计算DOM && CSSOM
- 计算Layout
- 将元素绘制到一个或多个位图中
- 将这些位图交给合成线程
相应地，合成线程负责：
- 通过GPU将位图绘制到屏幕上
- 同志主线程更新页面中可见或即将变成可见到部分到位图
- 计算出页面中哪部分是可见到
- 计算出当你在滚动页面时哪部分是即将变成可见到
- 当你在滚动页面时将相应位置到元素移动到可视区域
当用户滚动页面时，合成线程会通知主线程更新页面中最新可见部分到位图。但是，如果主线程响应慢，合成线程不会等待，而是马上绘制已经生成到位图，还没准备好的部分用白色进行填充。
GPU
快在于：
- 绘制位图到屏幕上
- 一遍又一遍绘制相同到位图
- 将同一位图绘制到不同位置，执行旋转以及缩放处理
慢在于：
- 将位图加载到它的内存中
因此，修改元素的height要比修改transform属性性能消耗大。这是因为对height的修改需要不断的relayout、repaint，这两个步骤的计算量可能是巨大的。而transform属性不会更改元素或它周围的元素的布局。transform属性会对元素的整体产生影响，它会对整个元素进行缩放、旋转、移动处理。
以下CSS属性在动画处理方面是比较快的：
- CSS transform
- CSS opacity
- CSS filter