浏览器如何渲染页面

[ChuChencheng]

大致流程

DOM

• 读取 HTML 的原始字节，根据文件编码（例如 UTF-8）转换成字符
• 令牌化，转化为 token
• 词法分析、语法分析
• 构建 DOM 树

CSSOM

• 读取字节，转换成字符
• 令牌化
• 词法分析、语法分析
• 构建 CSSOM 树

构建渲染树（Render Tree）

在 Gecko 下也叫 Frame Tree

• 从 DOM 树根节点开始遍历每个可见节点
• 对于每个可见节点应用对应的 CSSOM 规则
• 输出渲染树

渲染树包括节点内容与计算的样式

布局（Layout）

这个过程在 Gecko 下叫 Reflow

• 从渲染树跟节点开始遍历，计算每个节点在视口的确切位置与大小
• 输出 “盒模型”

绘制（Painting）

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

参考

• How browsers work
• 构建对象模型
• 渲染树构建、布局及绘制