页面渲染流程

1. 流程简述

浏览器内核拿到内容后，渲染步骤大致可以分

为以下几步：

1）解析HTML: 解析 HTML 并构建 DOM 树。 2）解析CSS: 解析 CSS 构建 CSSOM 树（样式树）。 3）合成渲染树：将 DOM 与 CSSOM 合并成一个 渲染树（Render Tree） 。 4）布局计算：根据渲染树的结构，计算每个节点在屏幕上的大小、位置等属性，生成布局信息（Layout）。这个过程会发生回流和重绘。 5）绘制页面：将生成的布局信息交给浏览器的绘图引擎，通过 GPU 加速将像素绘制（Paint）到屏幕上。 6）浏览器回流和重绘：如果页面发生改变，浏览器需要重新计算布局和绘制，这可能会导致性能问题。因此我们应尽量避免频繁的 DOM 操作和调整元素样式，以减少不必要的回流和重绘。

2. 解析HTML，构建DOM树

解析过程中遇到 CSS 解析 CSS，遇到 JS 执行 JS。

为了提高解析效率，浏览器在开始解析前，会启动一个预解析的线程，率先下载 HTML 中的外部 CSS 文件和 外部的 JS 文件。 如果主线程解析到link位置，此时外部的 CSS 文件还没有下载解析好，主线程不会等待，继续解析后续的 HTML。这是因为下载和解析 CSS 的工作是在预解析线程中进行的（浏览器在解析HTML文档并构建DOM树的同时，会使用另外的线程来查找、下载并解析CSS文件等资源，这个过程称为预解析）。这就是 CSS 不会阻塞 HTML 解析的根本原因。 如果主线程解析到script位置，会停止解析 HTML，转而等待 JS 文件下载好，并将全局代码解析执行完成后，才能继续解析 HTML。这是因为 JS 代码的执行过程可能会修改当前的 DOM 树，所以 DOM 树的生成必须暂停。这就是 JS 会阻塞 HTML 解析的根本原因。

浏览器会遵守一套步骤将 HTML 文件转换为 DOM 树。宏观上，可以分为几个步骤：