【浏览器渲染】浏览器渲染页面过程
2023/01/10 10:55:41
html 解析规则
- html 字符串一句一句读取并解析。
- 解析到 link 标签时发送请求获取 css。
- 解析到 script 标签时：
- 如果是嵌入代码的 script 标签则执行代码，阻断渲染流程（GUI 渲染线程挂起），执行完毕后继续解析。
- 如果是外部链接，则异步请求 script 文件，执行时机见script 标签的 async 和 defer。
- 解析到 img 后请求图片资源。
渲染页面流程
浏览器在获取到 html 数据后执行以下操作：
- 构建 DOM 树。
- 构建 CSS 树。
- 根据 DOM 树和 CSS 树构建渲染树。
- 根据渲染树来布局、生成图层并渲染到屏幕上。
构建 DOM 树
- 转换编码：浏览器获取到 html 原始字节数据后，根据文件指定的编码将字节数据转换为字符。
- 令牌化：将字符转换为 html 令牌（标签）。
- 词法分析：将标签转换为对象，并根据 html 中定义的包含结构生成 DOM 树（AST 抽象语法树？）。
样式计算
- 初始化样式表：浏览器拿到 CSS 文本数据后会将其转换为浏览器可以理解的结构（js 可用 document.styleSheets 属性来访问）。
- 计算 DOM 节点的具体样式：根据选择器将 CSS 样式绑定到 DOM 树上。
生成渲染树（布局树）
到这一步已经得到了一个绑定好样式的 DOM 树。
- 遍历 DOM 树的可见节点，并把这些节点添加到渲染树中。
- 计算元素位置并绑定到渲染树节点中。
生成图层树、绘制页面
浏览器最终生成的页面是由若干个图层叠加构成的，它们按照顺序叠放在一起。
浏览器根据渲染树节点的样式创建若干个图层（图层创建的条件），最终生成一个图层树。
浏览器根据图层树来渲染页面。