专门探索JavaScript及其所构建的组件系列文章第11篇

　　专门探索JavaScript及其所构建的组件系列文章第11篇

　　这是文章 致力于探索 JavaScript 及其构建的组件的系列中的第 11 篇文章。

　　如果你错过了前面的章节，你可以在这里找到它们：

　　JavaScript 的工作原理：引擎、运行时和调用堆栈概述！ JavaScript 的工作原理：深入了解 V8 引擎和编写优化代码的 5 个技巧！ JavaScript 是如何工作的：内存管理 + 如何处理 4 种常见的内存泄漏！ JavaScript 是如何工作的：事件循环和异步编程的兴起 + 5 种使用 async/await 进行更好编码的方法！ JavaScript 是如何工作的：探索 websocket 和 HTTP/2 和 SSE + 如何选择正确的路径！ JavaScript 是如何工作的：与 WebAssembly 及其使用场景的比较！ JavaScript 是如何工作的：Web Workers 的构建块 + 5 个使用它们的场景！ JavaScript 是如何工作的：Service Worker 生命周期和使用场景！ JavaScript 是如何工作的：Web 推送通知机制！ JavaScript 的工作原理：使用 MutationObserver 跟踪 DOM 变化

　　当您构建 Web 应用程序时，您不仅仅是编写单独运行的 JavaScript 代码，您编写的 JavaScript 还与环境进行交互。了解此环境、它的工作原理及其组将帮助您构建更好的应用程序，并为应用程序发布后可能出现的潜在问题做好充分准备。

　　浏览器的主要组件包括：

　　在这个文章 中，我将重点介绍渲染引擎，因为它处理 HTML 和 CSS 的解析和可视化，这是大多数 JavaScript 应用程序经常与之交互的东西。

　　渲染引擎概述

　　渲染引擎的职责是渲染，即在浏览器窗口中显示请求的内容。

　　渲染引擎可以显示 HTML 和 XML 文档和图像。如果您使用其他插件，渲染引擎还可以显示不同类型的文档，例如 PDF。

　　渲染引擎

　　与 JavaScript 引擎类似，不同的浏览器也使用不同的渲染引擎。以下是一些最受欢迎的：

　　Firefox、Chrome 和 Safari 基于两个渲染引擎。 Firefox 使用由 Mozilla 自主开发的渲染引擎 Geoko。 Safari 和 Chrome 都使用 Webkit。 Blink 是 Chrome 基于 WebKit 的自主渲染引擎。

　　渲染过程

　　渲染引擎从网络层接收请求文档的内容。

　　解析HTML构建Dom树->构建渲染树->布局渲染树->绘制渲染树

　　构建 Dom 树

　　渲染引擎的第一步是解析 HTML 文档并将解析的元素转换为 DOM 树中的实际 DOM 节点。

　　如果有以下Html结构

<p> Hello, friend!

smiley.gif

</p>

　　对应的DOM树如下：

　　基本上，每个元素都表示为所有元素的父节点，而这些元素直接收录在元素中。

　　构建 CSSOM

　　CSSOM 指的是 CSS 对象模型。浏览器在构建页面的DOM时，遇到head标签下的link标签，引用了外部的theme.css CSS样式表。浏览器预计可能需要资源来呈现页面，并立即发送请求。假设theme.css文件的内容如下：

　　body {

font-size: 16px;

}

p {

font-weight: bold;

}

span {

color: red;

}

p span {

display: none;

}

img {

float: right;

}

　　和 HTML 一样，渲染引擎需要将 CSS 转换成浏览器可以使用的东西——CSSOM。 CSSOM 结构如下：

　　你想知道为什么 CSSOM 是一个树状结构吗？在计算页面上任何对象的最终样式集时，浏览器从适用于该节点的最通用规则开始（例如，如果它是 body 元素的子元素，则应用所有的 body 样式），然后细化递归地，通过应用更具体的规则来计算样式。

　　我们来看一个具体的例子。 body 元素内 span 标签中收录的任何文本的字体大小为 16 像素，并且是红色的。这些样式继承自 body 元素。如果 span 元素是 p 元素的子元素，则不会显示其内容，因为它应用了更具体的样式（display: none）。

　　另请注意，上面的树不是完整的 CSSOM 树，只是我们决定在样式表中涵盖的样式。每个浏览器都提供一组默认样式，也称为“用户代理样式表”。这是我们在没有明确指定样式时看到的样式，我们的样式将覆盖这些默认值。

　　不同的浏览器对相同的元素有不同的默认样式，这就是为什么我们写 *{padding:0;marging:0};在 CSS 的最开始，也就是我们要重置 CSS 默认样式。

　　构建渲染树

　　CSSOM 树和 DOM 树连接在一起形成渲染树，用于计算可见元素的布局，并作为将像素渲染到屏幕的过程的输入。

　　渲染树中的每个节点在 Webkit 中称为渲染器或渲染对象。

　　下面是上面DOM和CSSOM树的渲染树的样子：

　　为了构建渲染树，浏览器大致执行以下操作：

　　对于每个可见节点，找到一个合适的匹配CSSOM规则，并应用一个样式来显示可见节点之间的差异（节点包括内容和计算样式）“visibility: hidden”和“display: none”，“ Visibility: hidden" 将元素设置为不可见，但也会在布局上占据一定的空间（例如，它会被渲染为一个空框），但是"display: none" 元素将节点从整个渲染树中移除, 所以它不是布局的一部分。

　　您可以在此处查看 RenderObject（在 WebKit 中）的源代码：

　　先来看看这个类的一些核心内容：

　　每个渲染器代表一个矩形区域，通常对应一个节点的CSS盒模型。它收录宽度、高度和位置等几何信息。

　　渲染树的布局

　　当您创建渲染器并将其添加到树中时，它没有位置和大小。计算这些值称为布局。

　　HTML 使用基于流的布局模型，这意味着大多数时候它可以一次性计算几何。坐标系相对于根渲染器，使用左上角的原点坐标。

　　Layout 是一个递归过程——它从根渲染器开始，它对应于 HTML 文档的元素。布局通过组件或整个渲染器层次结构递归地继续，为需要它的每个渲染器计算几何信息。

　　根渲染器的位置为0,0，其大小与浏览器窗口可见部分（即视口）的大小相同。开始布局过程意味着为每个节点提供它应该出现在屏幕上的确切坐标。

　　绘制渲染树

　　在这里绘制，遍历渲染树并调用渲染器的paint()方法在屏幕上显示内容。

　　绘图可以是全局的或增量的（类似于布局）：

　　一般来说，重要的是要了解绘图是一个渐进的过程。为了获得更好的用户体验，渲染引擎会尽快在屏幕上显示内容。它不会等到所有 HTML 都被解析后才开始构建和布局渲染树。相反，它会解析并显示部分内容，同时继续处理来自网络的其余内容项。

　　处理脚本和样式表的顺序

　　解析器到达时