关键路径渲染学习笔记

优先显示与当前用户操作有关的内容。

一、构建对象模型

文档对象模型 (DOM)

构建 DOM

1. 转换：浏览器从磁盘或网络读取 HTML 的原始字节，并根据文件的指定编码(例如 UTF-8) 将它们转换成各个字符。
2. 令牌化：浏览器将字符串转换成 W3C HTML5 标准 规定的各种令牌，例如，""、""，以及其他尖括号内的字符串。每个令牌都具有特殊含义和一组规则。
   3 词法分析：发出的令牌转换成定义其属性和规则的"对象"。
3. DOM 构建：由于 HTML 标记定义不同标记之间的关系(一些标记包含在其他标记内)，创建的对象链接在一个树数据结构内，此结构也会捕获原始标记中定义的父项-子项关系。

CSS 对象模型 (CSSOM)

CSSOM 构建过程

CSSOM 为何具有树结构？
为页面上的任何对象计算最后一组样式时，浏览器都会先从适用于该节点的最通用规则开始 (例如，如果该节点是 body 元素的子项，则应用所有 body 样式)，然后通过应用更具体的规则 (即规则"向下级联") 以递归方式优化计算的样式。

二、渲染树构建、布局及绘制

渲染树构建:

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

• 某些节点不可见(例如脚本标记、元标记等)，因为它们不会体现在渲染输出中，所以会被忽略。
• 某些节点通过 CSS 隐藏，因此在渲染树中也会被忽略

2. 对于每个可见节点，为其找到适配的CSSOM 规则并应用它们。
3. 发射可见节点，连同其内容和计算的样式。

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

绘制：
将渲染树中的每个节点转换成屏幕上的实际像素。

三、阻塞渲染的 CSS

• 默认情况下， CSS 被视为阻塞渲染的资源。
• 可以通过媒体类型和媒体查询将一些 CSS 资源标记为不阻塞渲染。
• 浏览器会下载所有 CSS 资源，无论阻塞还是不阻塞。

四、使用 JavaScript 添加交互

• JavaScript 可以查询和修改 DOM 与 CSSOM。
• JavaScript 执行会阻止 CSSOM。
• 除非将 JavaScript 显示声明为异步，否则它会阻止构建 DOM。

五、评估关键渲染路径

Navigation Timing API

• domLoading: 这是整个过程的起始时间戳，浏览器即将开始解析第一批收到的 HTML 文档字节。
• domInteractive: 表示浏览器完成对所有 HTML 的解析并且 DOM 构建完成的时间点。
• domContentLoaded: 表示 DOM 准备就绪并且没有样式表阻止 JavaScript 执行的时间点，这意味着现在可以构建渲染树了。
• domComplete: 所有处理完成，并且网页上的所有资源(图像等) 都已下载完毕，也就是说，加载旋转已经停止。
• loadEvent: 作为每个网页加载的最后一步，浏览器会触发 onload 事件，以便触发额外的应用逻辑。

摘自

developers.google 关键路径渲染