重排、重绘、合成是三种不同的渲染路径，路径越长，生成图像花费的时间就越长。
一、重排
当通过js或者css修改元素的几何信息后，就会触发重排。
为什么呢？
因为在修改了元素的几何信息之后，也就意味着在生成布局树，计算布局信息以及之后的过程都要重新再来一遍。
二、重绘
当通过js或者css改变元素的颜色之类的样式时，就会发生重绘。
为什么呢？
改变了样式，意味着cssom树的改变，但是元素的几何信息并没有改变，因此渲染过程会跳过生成布局树，计算布局以及分层的部分，而直接进入绘制阶段。
三、直接合成
当我们使用transform时，会直接合成。
因为transform动画不需要布局、分层和绘制，直接到了合成阶段，transform是直接操作了图层的。一些渐变、动画、变形等都是直接在合成阶段的。
四、为什么css动画比js动画要快
当要进行一些几何变换，透明度变化等操作时，直接使用js，会牵扯到整个渲染流程，使用css，我们可以使用will-change属性来提前告诉渲染进程，我们要做变换，渲染进程就会将该元素抽成单独的一个图层，变化发生时，合成进程直接处理变换，不会牵扯到其他。
.box {will-change: transform, opacity;}
