深入了解 Web 浏览器的工作原理

然后，服务器针对给定的请求以适当的 HTTP 响应进行响应。

响应包含状态代码、标头和正文。

3. 解析HTML

现在是主要部分。浏览器收到 HTML 文件后，对其进行解析以生成 DOM（文档对象模型）树。

这是由作为浏览器核心的浏览器引擎完成的（例如：Firefox 的 Gecko、Safari 的 Webkit、Chrome 的 Blink 等）。

这是一个示例 HTML 文件：

3.1. Tokenization

显示网页的第一步是标记化 HTML 文件。Token化是将一串字符分解为对浏览器有意义的块的过程。

Tokens是 DOM 树的基本构建块。

3.2. 构造DOM树

Lexing 是将一系列标记转换为称为 DOM 树的树结构的过程。

DOM 树是一种树状数据结构，表示 HTML 文档中的节点。

注意：如果页面需要任何外部资源，将按如下方式处理

非阻塞资源是并行获取的。例如：图像。

延迟资源是并行获取的浏览器工作原理是怎样的，但在构建 DOM 树后执行。例如：带有defer属性和 CSS 文件的脚本。

阻塞资源是按顺序获取和执行的。例如：script没有defer属性。

4. 解析CSS

DOM树构建完成后，浏览器解析CSS文件，生成CSSOM（CSS Object Model）。

这个过程类似于使用标记化和 CSSOM 生成的 DOM 树构造

5. 执行 JavaScript

如前所述，如果页面需要阻塞script，它将被立即获取并执行，同时 DOM 树构建暂停，否则script将在 DOM 树构建完成后获取并执行。

无论script何时执行，它都将由 JavaScript 引擎处理，这与浏览器引擎一样因浏览器而异。

5.1.即时编译

假设您熟悉解释器和编译器的概念，JavaScript 引擎使用一种称为 JIT（即时）编译的混合方法。

JIT 即Just In Time，意思是不同于编译语言，例如 C，编译是提前完成的（换句话说，在代码的实际执行之前），对于 JavaScript，编译是在执行期间完成的

6. Rendering（渲染）

终于到了渲染页面的时候了。浏览器使用 DOM 树和 CSSOM 来渲染页面。

6.1.Render tree construction

第一步是构建渲染树。呈现树是 DOM 树的子集，它只包含页面上可见的元素。

6.2. Layout

下一步是布局渲染树。这是通过计算渲染树中每个元素的确切大小和位置来完成的。

每当我们更改 DOM 中影响页面布局的某些内容时，甚至部分更改，都会发生此步骤。

重新计算元素位置的情况示例有：

从 DOM 中添加或删除元素

调整浏览器窗口大小

更改元素的width、height或position

6.3. Painting

最后，浏览器决定哪些节点需要可见并计算它们在视口中的位置，是时候在屏幕上绘制它们（渲染像素）了。这个阶段也被称为光栅化阶段，浏览器将在布局阶段计算的每个元素转换为屏幕上的实际像素。

就像布局阶段一样，每次我们更改 DOM 中元素的外观时都会发生此阶段，即使是部分更改也是如此。

重新计算元素位置的情况示例有：

更改元素的outline

更改元素的opacity或visibility

更改元素的background color

6.4. Layering & Compositing

最后一步是合成图层。这是由浏览器完成的，以优化渲染过程。

合成是一种将页面的各个部分分成层的技术，分别绘制它们并在称为合成器线程的单独线程中合成为页面。当文档的各个部分绘制在不同的层中并相互重叠时，合成是必要的，以确保它们以正确的顺序绘制到屏幕上并正确呈现内容

注意：DOM 更新，特别是布局和绘制浏览器工作原理是怎样的，是非常昂贵的操作，在低端设备上可以明显注意到。因此，尽量减少触发次数很重要。