关键路径渲染学习笔记
2019-05-30 本文已影响0人
回调的幸福时光
优先显示与当前用户操作有关的内容。
一、构建对象模型
文档对象模型 (DOM)
构建 DOM
- 转换：浏览器从磁盘或网络读取 HTML 的原始字节，并根据文件的指定编码(例如 UTF-8) 将它们转换成各个字符。
- 令牌化：浏览器将字符串转换成 W3C HTML5 标准 规定的各种令牌，例如，"<html>"、"<body>"，以及其他尖括号内的字符串。每个令牌都具有特殊含义和一组规则。
3 词法分析：发出的令牌转换成定义其属性和规则的"对象"。 - DOM 构建：由于 HTML 标记定义不同标记之间的关系(一些标记包含在其他标记内)，创建的对象链接在一个树数据结构内，此结构也会捕获原始标记中定义的父项-子项关系。
CSS 对象模型 (CSSOM)
CSSOM 构建过程
CSSOM 为何具有树结构？
为页面上的任何对象计算最后一组样式时，浏览器都会先从适用于该节点的最通用规则开始 (例如，如果该节点是 body 元素的子项，则应用所有 body 样式)，然后通过应用更具体的规则 (即规则"向下级联") 以递归方式优化计算的样式。
二、渲染树构建、布局及绘制
渲染树构建:
- 从 DOM 树的根节点开始遍历每个可见节点。
- 某些节点不可见(例如脚本标记、元标记等)，因为它们不会体现在渲染输出中，所以会被忽略。
- 某些节点通过 CSS 隐藏，因此在渲染树中也会被忽略
- 对于每个可见节点，为其找到适配的CSSOM 规则并应用它们。
- 发射可见节点，连同其内容和计算的样式。
布局：
布局流程的输出是一个"盒模型"，它会精确地捕获每个元素在视口内的确切位置和尺寸：所有相对测量值都转换为屏幕上的绝对像素。
绘制：
将渲染树中的每个节点转换成屏幕上的实际像素。
三、阻塞渲染的 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 事件，以便触发额外的应用逻辑。
