渲染树-布局和绘制

5-渲染树-布局和绘制

renderer 节点刚刚创建，插入 render tree 中并没有 position 和 size 信息，而 layout 阶段就是计算元素几何信息的地方。因为浏览器采用的是流式布局，计算元素的几何信息是一次性的，而且后面元素几乎不影响前面元素的几何信息，除 table 元素例外。

每一个 renderer 都要一个 layout 方法，而整个过程是从 render 树的底层节点开始，递归的计算每一个节点的几何信息，root renderer 的位置是浏览器窗口的左上角，而对应的大小就是浏览器窗口的大小。

布局也有不同的种类：全局布局和增量布局。

全部的样式改变，影响到所有的 renderer （如 font-size）或是调整了窗口的大小（resize），会触发全局布局。而如果仅仅是 renderer 的位置改变的时候，整个解析器并不会再次渲染 renderer 大小而是去缓存中取。

而有 renderer 标记为 dirty 时，会触发增量布局，该过程是异步的。标记 dirty 是作用就是标记自身，告诉解析器说：「我需要重新layout了。」

计算完对应的布局之后，开始就是 painting 阶段，同样遍历 render tree，让每一个节点触发自身的 paint 函数，然后使用 UI infrastructure component 去绘制整个页面。每一个元素绘制的顺序是背景颜色、背景图片、边框、children、outline。而我们知道一般在后续的解析脚本中，可能会触发重绘，而绘制遵行的原则是：当样式发生变化时，浏览器会尽可能做出最小的响应。

绘制的过程有所讲究的：很早之前（chrome最开始的版本），绘制过程是将 render tree 的信息转化为窗口上的每一个像素点，这个过程叫做光栅化（rasterizing），其实叫做栅格化比较好理解。但这样仅仅绘制的是当前窗口的图像，当窗口移动的时候，才会将尚未绘制的部分进行删格化。

但现今浏览器更多采用的是 复合层（compositing）方式，而改方式其实就是将一个页面分为不同的 layer，顺便删格化这些 layer，而展示方式变为将不同的 layer 合并为一个新的画面，这样呈现给 web 动画创造了良好的基础。

通过以上这么多的流程，最后就是让你我看到了，设计师和工程师们辛苦的杰作咯~

下一篇文章

参考文献

转载于:https://juejin.im/post/5c6d3d6ee51d45093b626500