Skip to content

Latest commit

 

History

History
54 lines (33 loc) · 2.54 KB

3.1 渲染树构建、布局及绘制.md

File metadata and controls

54 lines (33 loc) · 2.54 KB

渲染树构建、布局及绘制

CSSOM 树和 DOM 树合并成渲染树，然后用于计算每个可见元素的布局，并输出给绘制流程，将像素渲染到屏幕上。优化上述每一个步骤对实现最佳渲染性能至关重要。

TL;DR

DOM 树与 CSSOM 树合并后形成渲染树。 渲染树只包含渲染网页所需的节点。 布局计算每个对象的精确位置和大小。 最后一步是绘制，使用最终渲染树将像素渲染到屏幕上。

  • 第一步是让浏览器将 DOM 和 CSSOM 合并成一个“渲染树”，网罗网页上所有可见的 DOM 内容，以及每个节点的所有 CSSOM 样式信息。

为构建渲染树，浏览器大体上完成了下列工作：

  • 1.从 DOM 树的根节点开始遍历每个可见节点。

    • 某些节点不可见（例如脚本标记、元标记等），因为它们不会体现在渲染输出中，所以会被忽略。
    • 某些节点通过 CSS 隐藏，因此在渲染树中也会被忽略，
      例如，上例中的 span 节点---不会出现在渲染树中，---因为有一个显式规则在该节点上设置了“display: none”属性。

  • 2.对于每个可见节点，为其找到适配的 CSSOM 规则并应用它们。

  • 3.发射可见节点，连同其内容和计算的样式

最终输出的渲染同时包含了屏幕上的所有可见内容及其样式信息。有了渲染树，我们就可以进入“布局”阶段。

“Layout”事件在时间线中捕获渲染树构建以及位置和尺寸计算。
布局完成后，浏览器会立即发出“Paint Setup”和“Paint”事件，将渲染树转换成屏幕上的像素。

position属性

- static： 使用正常的布局行为，即元素在文档常规流中当前的布局位置
- relative: 相对定位; 相对于自身
- absolute: 绝对定位;  相对于第一个父元素
- fixed: 固定定位：相对于屏幕视口 ; **旧版本IE不支持**
- position: -webkit-sticky;   粘性定位，元素在跨越特定阈值前为相对定位，之后为固定定位
position: sticky;  **兼容性**

position跟display、margin collapse、overflow、float这些特性相互叠加

  • 1.'display'、'position' 和 'float' 的相互关系

参考