浏览器是怎样通过你写的代码生成用户看到的像素的呢?在初始化加载过程中,浏览器首先下载并解析HTML,然后将其转换成一棵由DOM结点组成的内容树。除此之外,样式信息也会被解析和计算并生成一棵渲染树。为了提高效率,渲染引擎可能会将这个任务拆分,所以渲染树的某些部分可能会在HTML被解析之前就生成好了。

一旦渲染树生成,会从页面的左上角开始递归地计算元素的position和size,最终生成一个布局。通常这个计算过程会一次性完成,但有些时候也需要计算多次,这取决于元素流。元素的定位在元素间是高度依赖的,为了优化这一过程,浏览器会追踪元素的变化并将这些变化的元素以及它们的子元素标记为dirty,因此,由于元素之间的相互关联,改变布局的代价是昂贵的,应该尽量避免此类操作。

当布局完成之后,内容就会被绘制到屏幕上。在这一步中,视觉相关的样式会被相应的视觉模型用来绘制页面。和布局过程一样,脏元素同样会被追踪并被合成为一个矩形区域。每一帧的重绘过程都会重新绘制这个脏的区域,因此,重绘也需要大量的计算,也应该尽量避免。

最后一步,所有被渲染的元素会被合在一起。在默认情况下,它们都被绘制在一个存储层中,然而,通过将元素分层,更新该元素将只会影响到和该元素相对应的层。这些层由GPU生成,由CPU绘制,经硬件加速的合成过程在基本的绘制操作上是非常高效的。通过分层可以实现无破坏性的改动(不会影响其他层)。就和你猜想的一样,对GPU复合层的改动是代价最小的。

enter image description here