【浏览器渲染原理】布局之Dirty位系统

来源：互联网发布：遗精频繁怎么办知乎编辑：程序博客网时间：2024/06/05 10:02

渲染器在创建完成并添加到渲染树时，并不包含位置和大小信息。计算这些值的过程称为布局或重排。

HTML采用基于文档流的布局模型，按先后顺序进行解析。处于流中靠后位置元素通常不会影响靠前位置元素的几何特征，因此布局可以按从左至右、从上至下的顺序遍历文档。除绝对定位、固定定位和浮动元素之外，任何元素将默认为流布局模式。

坐标系是相对于根框架（顶层框架）而建立的，使用的是上坐标和左坐标。

布局是一个递归的过程。它从根呈现器（<html>）开始，然后递归遍历部分或所有的框架层次结构，为每一个需要计算的渲染器计算几何信息。

根渲染器的位置左边是0，0，其尺寸为视口（浏览器窗口的可见区域）。

所有的渲染器都有一个layout或reflow方法，每一个渲染器都会调用其需要进行布局的子代的layout方法。

为避免对所有细小更改都进行整体布局，浏览器采用了一种“dirty位”系统。如果某个渲染器发生了更改，或者将自身及其子代标注为“dirty”，则需要进行布局。

标记分为：“dirty”和“children are dirty”。“children are dirty”表示尽管呈现器自身没有变化，但它至少有一个子代需要布局。

【参考资料】

1 浏览器的工作原理

0 0