当浏览器收到一个 HTML 文件后，会进行一系列步骤来解析和渲染页面。以下是这些步骤的详细过程：
1. 解析 HTML
- 构建 DOM 树：浏览器从上到下逐行解析 HTML 文件，构建一个文档对象模型（DOM）树。DOM 树是 HTML 文档的内存表示，每个 HTML 标签对应一个节点。
- 解析标签：浏览器识别 HTML 标签并创建相应的 DOM 节点。
- 处理文本：浏览器将文本节点添加到相应的父节点中。
2. 处理 CSS
- 解析 CSS：浏览器解析 HTML 文件中的
<style>标签和外部 CSS 文件（通过<link>标签引入），构建一个 CSS 对象模型（CSSOM）树。- 下载 CSS 文件：如果 HTML 文件中包含外部 CSS 文件的链接，浏览器会发起请求下载这些文件。
- 解析 CSS 规则：浏览器解析 CSS 规则并将其添加到 CSSOM 树中。
3. 处理 JavaScript
- 解析和执行 JavaScript：浏览器解析并执行 HTML 文件中的
<script>标签和外部 JavaScript 文件（通过<script src="...">引入）。- 下载 JavaScript 文件：如果 HTML 文件中包含外部 JavaScript 文件的链接，浏览器会发起请求下载这些文件。
- 阻塞解析：默认情况下，JavaScript 的执行会阻塞 HTML 的解析，直到脚本执行完毕。可以通过
async或defer属性来改变这一行为。 - 修改 DOM 和 CSSOM：JavaScript 可以修改 DOM 和 CSSOM 树，影响页面的结构和样式。
4. 构建渲染树
- 结合 DOM 和 CSSOM：浏览器将 DOM 树和 CSSOM 树结合，构建渲染树（Render Tree）。渲染树包含了页面中可见的所有元素及其样式信息。
- 过滤不可见元素：渲染树不包含
display: none的元素，因为它们不会显示在页面上。
- 过滤不可见元素：渲染树不包含
5. 布局（回流）
- 计算布局：浏览器根据渲染树计算每个元素的布局信息（位置和大小）。这个过程称为布局或回流（Reflow）。
- 从根节点开始：浏览器从渲染树的根节点开始，递归计算每个节点的布局信息。
- 考虑盒模型：浏览器根据 CSS 盒模型计算元素的宽度、高度、边距、边框和填充。
6. 绘制（重绘）
- 绘制页面：浏览器将渲染树中的每个节点绘制到屏幕上。这个过程称为绘制或重绘（Repaint）。
- 绘制顺序：浏览器按照渲染树的顺序绘制每个节点，从背景到前景。
- 绘制图层：复杂的页面可能会被分成多个图层，浏览器会分别绘制每个图层，然后将它们合成到一起。
7. 处理用户交互
- 事件处理：浏览器处理用户的交互（如点击、输入、滚动等），并触发相应的事件。
- 事件监听：JavaScript 可以通过事件监听器处理用户交互事件。
- 更新 DOM 和 CSSOM：用户交互可能会导致 DOM 和 CSSOM 树的更新，触发重新布局和重绘。
总结
当浏览器收到一个 HTML 文件后，会进行以下步骤：
- 解析 HTML，构建 DOM 树。
- 解析 CSS，构建 CSSOM 树。
- 解析和执行 JavaScript，可能修改 DOM 和 CSSOM 树。
- 结合 DOM 和 CSSOM 树，构建渲染树。
- 计算布局信息，进行布局（回流）。
- 绘制页面，进行绘制（重绘）。
- 处理用户交互，更新页面。
这些步骤共同确保浏览器能够正确解析和渲染网页，并响应用户的交互。