浏览器了解（七）Layout

来源：互联网发布：zerohedge怎么样知乎编辑：程序博客网时间：2024/05/16 15:10

Layout

浏览器在Render之后已经确认了Render元素的大小，样式等信息，但是此时还没有确定元素的具体位置信息，这里还需要一个Layout过程。
Layout过程计算元素的位置信息，通常情况下浏览器的中下面的元素的布局不会影响到上面的元素的布局，所以Layout可以自上而下地进行。其坐标位置基于Frame，使用top和left来定位。

Layout的范围：
1.    全局
全局Layout会对整个RenderTree进行排版，触发全局Layout的行为如，浏览器窗口发生改变、网页字体改变等。
2.    局部
局部Layout只针对网页中的一部分内容进行排版，一般将这个区域叫做dirty rect。触发局部Layout的行为比较多，如Render节点被加入RenderTree、RenderTree中的某个节点发生改变。
Layout方式：
Layout过程是递归实现的
1.    由Parent Render节点确定宽度
2.    通过Parent Render找到每一个Child Render节点，计算每一个Child Render的高度
3.    累加Child Render的高度得到最终的高度

本文出自 “雨轩印象” 博客，请务必保留此出处http://zilla.blog.51cto.com/3095640/862906