渲染树-布局和绘制

1,903 阅读2分钟

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 动画创造了良好的基础。

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

下一篇文章

参考文献