网页的解析过程

概要：最近在过一遍前端基础，顺带记录一下，今天要复习的是网页解析过程。

作为一个前端，我的工作依托于浏览器，所以很有必要学习和了解浏览器的组成。

浏览器的主要组件包括：

界面：包括地址栏、前进/后退按钮、书签菜单等。除显示请求网页的窗口外，浏览器显示的其他部分。
浏览器引擎：在界面和渲染引擎之间编组操作，编组操作指的是将不同的操作组织（调度和进程管理）起来，使得它们能够被协调处理。也可以称之为浏览器主进程，工作内容包括进程间通信（IPC）、安全管理、网络请求（向网络进程发送请求）。
渲染引擎：负责显示请求的内容。例如，如果请求的内容是 HTML，呈现引擎会解析 HTML 和 CSS，并在屏幕上显示解析后的内容。和浏览器引擎是合作关系，是主进程中的一个重要组件。
网络：对于网络调用，例如 HTTP 请求。也可以称之为网络进程。
界面后端：用于绘制基本微件，例如组合框和窗口。此后端公开了与平台无关的通用接口。在其底层使用操作系统界面方法。
JavaScript 解释器。用于解析和执行 JavaScript 代码。和渲染引擎是合作关系，是渲染引擎中的一个重要组件。
数据存储。这是一个持久层。浏览器可能需要在本地保存各种数据，例如 Cookie。浏览器还支持多种存储机制，如 localStorage、IndexedDB、WebSQL 和 FileSystem。

渲染引擎解析从网络层获取到的文档—— HTML 文档将元素转换为名为“内容树”的树中的 DOM 节点。

随后解析外部 CSS 文件和样式元素中的样式数据。

HTML 中的样式信息与视觉说明将用于创建另一个树：渲染树。渲染树包含多个具有视觉属性（如颜色和尺寸）的矩形。这些矩形按照正确的顺序在屏幕上显示。

渲染树构建完毕后，会经历一个“布局”过程。这意味着为每个节点提供其在屏幕上应出现的确切坐标。下一阶段是绘制 - 系统将遍历渲染树，并使用界面后端层绘制每个节点。

需要注意的是，这是一个渐进的过程。为获得更好的用户体验，呈现引擎会尽可能尽快在屏幕上显示内容。它不会等到所有 HTML 都解析完毕后，才会开始构建呈现树并为其设置布局。系统会解析并显示部分内容（首次渲染会受到其他影响，详细请看下段内容），同时继续处理来自网络的其余内容。

CSS 下载与解析对 HTML 渲染的影响

虽然 CSS 文件的下载是异步的，也就是说，浏览器会在继续解析 HTML 文档的同时，开始并行下载外部的 CSS 文件，但 CSS 的应用确实会影响页面的首次渲染。

具体来说：

浏览器可以并行下载 HTML 和外部资源（如 CSS、JavaScript 等）。
当浏览器解析 HTML 时，遇到外部样式表（<link rel="stylesheet">）时，它会立即开始下载 CSS 文件，并继续解析 HTML 文档。
然而，在 CSS 文件下载并解析完成之前，浏览器不会执行渲染，即不会将内容呈现到屏幕上。原因是 CSS 会影响页面的布局和样式，浏览器必须等样式表准备好后，才能正确绘制页面。

因此，外部样式表的下载和解析不会阻塞 HTML 的解析，但它会阻止页面内容的首次渲染，直到样式表加载和解析完成。

JavaScript 对渲染的影响

相对而言，JavaScript 的情况稍微不同：

同步 JavaScript（即没有 async 或 defer 的 <script> 标签）会阻塞 HTML 的解析。浏览器在遇到同步的 JavaScript 时，必须暂停 HTML 的解析，直到该脚本下载并执行完毕。
异步 JavaScript（async 或 defer）则不会阻塞 HTML 的解析。尤其是 defer 脚本，会在 HTML 解析完成后再执行，不会影响页面渲染。

总结之间的关系

CSS 下载和解析：下载是并行的，不阻塞 HTML 解析，但由于 CSS 可能影响页面的布局和样式，浏览器在所有 CSS 资源解析完成之前不会渲染页面的内容。这是为了确保页面呈现时样式正确。
HTML 渲染：HTML 是渐进式解析和渲染的。浏览器在解析 HTML 时会尽快将可用的部分渲染到屏幕上，只要没有阻塞的样式表或同步脚本。
JavaScript：同步脚本会阻塞 HTML 解析，而异步脚本不会。

本文只是大致归纳了解析过程，更多像词法分析器、语法分析器、全局布局、增量布局、异步布局、同步布局等内容可以前往web.dev了解。