浏览器渲染原理

[nfssuzukaze]

浏览器渲染原理

影响 web 性能的主要原因:

1. 等待资源加载
2. 大部分情况下的浏览器单线程执行

当浏览器获得 HTML 文件时

1. 构建文档对象模型(DOM)

浏览器每次处理 HTML 标记时, 都会完成以下步骤:

1. 转换: 将传送到浏览器的原始字节根据指定编码转换为各个字符
2. 令牌化: 浏览器将字符串转换为 W3C HTML5 标准 规定的各种令牌
3. 词法分析: 发出的令牌转换成定义其属性和规则的 "对象"
4. DOM 构建:

整个流程需要一些时间才能完成, 有大量 HTML 需要处理时更是如此

2. 构建 CSS 对象模型(CSSOM)

由于当遇到 CSS 文件时, 会新开一个进程, 使得 CSS 的解析和 HTML 的解析可以同时进行, 所以将 CSS 独立于 HTML 不仅有利于将内容和设计作为独立关注点进行处理, 还相比于将 CSS 代码写在 HTML 标记内的加载速度更快 CSSOM 的构造与 DOM 的构造过程相似: 转换 --> 令牌化 --> 词法分析 --> CSSOM 构建

3. 构建渲染树, 布局及绘制

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

至此, 浏览器已经计算了哪些节点应该是可见的以及它们的计算样式, 但是尚未计算它们在设备视口内的确切位置和大小, 这就是接下来的布局工作

2. 布局(Layout) 为弄清楚每个对象在网页上的确切大小和位置, 浏览器从渲染树的根节点开始进行遍历 布局流程的输出是一个 "盒模型", 它会精确地捕获每个元素视口内的确切位置和尺寸, 将所有的测量值转换为屏幕上的绝对像素 最后, 将得出的信息传递给最后一个阶段: 绘制

3. 绘制(Paint) 布局完成后, 浏览器会立即发出 "paint" 事件, 将渲染树转换为屏幕上的像素

4. 浏览器渲染过程简述:

1. 处理 HTML 标签, 并构建 DOM 树
2. 处理 CSS 标签, 并构建 CSSOM 树
3. 将 DOM 树和 CSSOM 树合并成一颗渲染树(Render)
4. 根据渲染树进行布局, 计算每个节点的几何信息(Layout)
5. 将各个节点绘制到屏幕上(Paint)

注意: 如果 DOM 或 CSSOM 被修改, 便只能再执行一次上面的步骤 如果能最大限度缩短执行上述 1~5 步的时间, 就能尽快将内容渲染到屏幕上, 此外还能缩短首次渲染后屏幕刷新的时间