关键路径渲染-简单了解

时间:2021-1-8 作者:admin

关键路径渲染

关键渲染路径 :

浏览器将HTML,CSS,JavaScript转换为屏幕上所呈现的实际像素,这期间所经历的一系列步骤,叫做关键路径(Critical Rendering Path)

路径概览

       |------- DOM ------|

HTML解析---|             |---渲染树---布局---绘制

      |------ CSSOM -----|

HTML逐步解析的,不会等待 DOM 都构建完毕后再去构建 CSSOM 。正常来说,从上面也可以看出,DOM的构建跟 CSSOM 是平行的,他们是井水不犯河水,各自默默构建的。等待 DOM树CSSOM树 都构建完毕后,他们就会结合组成 渲染树 。然后计算节点位置和大小(自动重排)。接下来就是将 渲染树 转换成屏幕上的像素。

关键渲染路径 :

有了渲染树之后,接下来进入布局阶段。这一阶段浏览器要做的事情是要弄清楚各个节点在页面中的确切位置和大小。通常这一行为也被称为“自动重排”。

布局流程的输出是一个“盒模型”,它会精确地捕获每个元素在视口内的确切位置和尺寸,所有相对测量值都将转换为屏幕上的绝对像素。

注意

  • 渲染树仅会捕获可见的内容,即以下内容不会在渲染树中
  1. 不会渲染输出的节点(如脚本Token(如 linkscript ),元Token(<head></head> 以及标签内的元素))
  2. 被隐藏的节点(display: none),但 visibility:hidden 的节点会在渲染树中,因为该节点还大小和位置都有计算,只是没绘制出来。

关键渲染路径 :

浏览器构建渲染树的工作如下:

  1. 从DOM树的根节点开始遍历每个可见节点
  2. 对于每个可见节点,为其找到适配的 CSSOM 规则并应用它们
  • DOM是一边解析,一边输出为节点对象的,待所有的Token都转化为节点对象,DOM树就构建完成了

  • CSSOM必须完整构建,也就是不完整的CSS是无法使用的,构建一旦开始,就必须等到构建完毕 。一般来说,这不会有什么问题,但如果 HTML解析器 遇到了 JavaScript,那么它会暂停构建DOM,将控制权交给 JavaScript引擎 。这就是平时说的,JavaScript加载,解析和执行会阻碍DOM的构建。

    由于 JavaScript 也有可能操作 CSSOM,且我们知道 CSSOM 必须要完整才能使用,所以浏览器让 JavaScript 执行延迟到 CSSOM 构建完毕后,才去执行。然后再恢复 DOM树 的构建。所以,当出现这种情况的时候,CSSOM 也会阻碍 DOM 构建的。

关键渲染路径 :

通常情况下DOM和CSSOM是并行构建的,但是当浏览器遇到一个script标签时,DOM构建将暂停,直至脚本完成执行。但由于JavaScript可以修改CSSOM,所以需要等CSSOM构建完毕后再执行JS。

总结

  1. DOM 一边解析,一边生成节点对象;CSSOM 一旦开始构建,就必须要构建完成,因为不完整的 CSSOM 可能得不到最终的样式。
  2. 正常情况下,DOM树CSSOM树并行构建,待两者都构建完毕后,组成渲染树,然后进行布局计算,最后绘制,呈现到屏幕上;
  3. 特殊情况,也就是 HTML解析时遇到了 Script ,为了避免 JavaScript 可能会操作DOM,从而跟DOM树构建起冲突, 将会暂停DOM树的构建,且将主动权交给 JavaScript 引擎。这就是 JavaScript 加载,解析和执行会阻碍 DOM树构建的原因;
  4. 也是特殊情况下,JavaScript 可能会操作 CSS,从第一点知道,CSSOM 一旦构建,将不会停下来,所以,此时,浏览器将会暂停 JavaScript的执行,先去加载,解析,构建CSSOM,然后再执行 JavaScript,然后再恢复DOM树的构建。这种情况下,CSSOM也是会阻碍 DOM树的构建的
  5. 渲染树节点跟DOM树节点,不是一一对应的 ,DOM树上存在head 标签和 脚本 标签和不可见的元素,渲染树上都是没有的。因为渲染树只会渲染需要渲染且可见的节点。

参考

关键渲染路径

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。