关键渲染路径

发表于2021-11-04更新于2021-12-26字数统计986阅读时长6分阅读次数

关键渲染路径(Critial Rendering Path)

  • 从服务器获取HTML文件后到页面呈现完整内容发生的事情

分为六步

  1. 创建DOM树（Constructing the DOM Tree）
  2. 创建CSSOM树（Constructing the CSSOM Tree）
  3. 执行脚本（Running JavaScript）
  4. 生成渲染树（Creating the Render Tree）
  5. 生成布局（Generating the Layout）
  6. 绘制（Painting）

image-20211104212625747

创建DOM树

将HTML中的所有标签生成一棵树

  • HTML中的每个元素或文本对应一个节点
  • 嵌套在元素内的元素会被解析成外层元素的子节点

注意：

  • HTML可以部分执行
    • 即不需要等到全部解析完毕才显示页面
  • 其他资源可能阻塞页面渲染
    • CSS、JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>  
<head>  
  <title>Understanding the Critical Rendering Path</title>
  <link rel="stylesheet" href="style.css">
</head>  
<body>  
  <header>
      <h1>Understanding the Critical Rendering Path</h1>
  </header>
  <main>
      <h2>Introduction</h2>
      <p>Lorem ipsum dolor sit amet</p>
  </main>
  <footer>
      <small>Copyright 2017</small>
  </footer>
</body>  
</html>

上述代码解析为DOM树为：

image-20211104213335807

创建CSSOM树

CSSOM（CSS对象模型）树

  • 附在DOM结构上的样式的一种表示方式
    • 与DOM树类似，只是每个节点带上样式，包括明确的定义和隐式的继承

注意：

  • CSS是一种渲染阻塞资源(render blocking resource)，即需要完全被解析后才能进入渲染树环节，不像HTML能部分执行
    • 因为CSS具有继承属性，后面定义的样式会修改或覆盖前面的样式，所以不能部分执行，需要等到完全解析完毕后才能进入下一环节
  • 当CSS文件适用于当前设备的时候，才会造成渲染阻塞
    • 例如：<link rel=”stylesheet”>接受media属性，该属性规定了CSS文件适用于哪种设备
      • 当设置为orientation: landscape(横向)的样式，则当我们竖着浏览页面的时候，这个CSS资源就不会起作用，也就不会阻塞

在上述HTML页面中，style.css代码如下

1
2
3
4
5
6
7
body { font-size: 18px; }

header { color: plum; }  
h1 { font-size: 28px; }

main { color: firebrick; }  
h2 { font-size: 20px; }

对应CSSOM树为

image-20211104214205042

执行JavaScript

JavaScript是一种**解析阻塞资源(parser blocking resource)**，它能阻塞HTML页面的解析。

  • 当页面解析到<script>标签，无论内联或外联，页面解析都会阻塞，转而执行JavaScript文件(如果是外联文件则需要先加载)。
    • 这就是为什么如果JavaScript文件中有引用HTML中的元素，需要把JavaScript文件放到该元素后面

为了避免JavaScript文件阻塞页面的解析,可以加上async属性，使得JavaScript文件异步加载

1
<script async src="script.js">

生成渲染树

渲染树：DOM树和CSSOM树的结合

  • 包含能最终渲染到页面的元素的树形结构
  • 不包含那些用CSS样式隐藏的元素
    • 例如display:none的元素

上述例子的渲染树如下

image-20211104220607320

生成布局

布局决定了视口的大小，为CSS样式提供的依据

  • 例如百分比的换算或者视口的总像素值

视口大小是由meta标签的name属性为viewport的内容设置所决定的，如果缺少这个标签，则默认的视口为980px

  • 常见的viewport设置是自适应于设备尺寸
1
<meta name="viewport" content="width=device-width,initial-scale=1">

例如用户访问一个设备宽度为1000px 的页面

  • 一半的视口：500px
  • 10%：10px

绘制

页面上的可见的内容会转化为屏幕上的像素点

  • 绘制过程所花费的时间取决于DOM的大小以及元素的CSS样式

最后

可以利用Chrome开发者工具下的Timeline去观察整个关键路径渲染的过程
参考