渲染树的构建、回流、重绘、布局抖动

一、渲染树的构建、布局和绘制

DOM 和 CSSOM 树组合成一个渲染树(render tree),然后用于计算每个可见元素的布局(layout),并用作将像素渲染到屏幕的绘制(paint)过程的输入。 优化每个步骤对于实现最佳渲染性能至关重要。

构建渲染树(可见的节点及样式)—>布局也称回流(位置和大小)—>绘制(像素)

DOM 和 CSSOM 这两个都是独立的对象,它们捕获文档的不同方面:一个描述内容,另一个描述需要应用于文档的样式规则。 我们如何合并两者并让浏览器在屏幕上渲染像素?

要点:

  • DOM 和 CSSOM 树组合在一起形成渲染树。
  • 渲染树仅包含渲染页面所需的节点。
  • 布局计算每个对象的确切位置和大小
  • 最后一步是绘制,它采用最终的渲染树并将像素渲染到屏幕上。

1. 渲染树的构建

首先,浏览器将 DOM 和 CSSOM 组合成一个渲染树,它捕获页面上所有可见的 DOM 内容以及每个节点的所有 CSSOM 样式信息。
在这里插入图片描述
为了构建渲染树,浏览器大致执行以下操作:

第一步:从 DOM 树的根开始,遍历每个可见节点。

  • 一些节点是不可见的(例如,脚本标签、元标签等),并且被省略,因为它们不会反映在渲染的output中。

  • 一些通过CSS隐藏的节点,也从渲染树中省略。 例如,上面示例中的一个span节点从渲染树中丢失了,因为它被设置了“display:none”属性。

第二步:对于每个可见节点,找到适当的匹配 CSSOM 规则并应用它们。

第三步:发出带有内容及其计算样式的可见节点。

注意:
visibility:hidden 使元素不可见,但该元素仍然占据布局中的空间(即它被渲染为一个empty box)。
display:none 将元素从渲染树中完全删除,使得该元素不可见并且不是布局的一部分。

最终的output是一个包含屏幕上所有可见内容的内容和样式信息的渲染树。到目前为止,我们已经计算了哪些节点应该可见以及它们的计算样式。

有了渲染树,我们就可以进入“布局”阶段。

2. 布局

计算可见节点在设备视口中的确切位置和大小——这就是布局阶段,也称为回流

为了确定页面上每个节点的确切大小和位置,浏览器从渲染树的根开始并遍历它。

示例解说:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Critial Path: Hello world!</title>
  </head>
  <body>
    <div style
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值