css动画渲染的流程

原文

css动画渲染的过程中有以下三个步骤：

1. 布局
2. 绘制
3. 合成

布局

浏览器会先计算每一个元素在屏幕上占有多少空间大小。所以在这个“布局”过程中，与元素的width和height、位置有着很大的联系。在任何时候，只有改变元素的宽高，或者元素属性【top/left】，浏览器对元素布局都会重新计算一次。

就算是使用JavaScript在DOM添加或者删除元素，都会导致浏览器重新计算元素的布局，浏览器必须重新渲染一次页面。

绘制

这个过程就是填充像素：描绘文本、着色图片、边框和阴影。绘制的过程是在内存发生的，页面中的各个部分形成很多图层。若是修改元素的背景颜色，那么浏览器就会重新绘制它。

合成

浏览器将所有绘制完成的图层，提取为屏幕上的图像。
opacity和transform两个属性值发生改变的时候，元素渲染的时间非常少。这时候，浏览器会将元素提升到自己的绘制图层并使用GPU【计算机图形处理器】加速。因为元素是存在浏览器自己的绘制图层内，所以在整个图像变化中主图层不会发生变化，也无须重新绘制。