关键路径渲染学习笔记

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

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

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

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

渲染树构建:

  1. 从 DOM 树的根节点开始遍历每个可见节点。
  • 某些节点不可见(例如脚本标记、元标记等),因为它们不会体现在渲染输出中,所以会被忽略。
  • 某些节点通过 CSS 隐藏,因此在渲染树中也会被忽略
  1. 对于每个可见节点,为其找到适配的CSSOM 规则并应用它们。
  2. 发射可见节点,连同其内容和计算的样式。

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

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

三、阻塞渲染的 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 关键路径渲染

你可能感兴趣的:(关键路径渲染学习笔记)