浏览器、DOM、JavaScript。构建高效Web应用程序所需的一切知识。第一部分——浏览器。
一切是如何开始的
好的，这到底是怎么运作的？
HTML解析。
CSS解析。
依恋
布局（流程）
绘画
结论
后记。
最初我计划只写关于 DOM 的文章，甚至已经写好了第一篇文章。但我后来意识到，为了更深入地理解一些概念，我需要稍微了解一下浏览器的工作原理。然后我又想——为什么只是“稍微”了解一下？也许根本不需要？最终我决定这么做。
现在，我关于 DOM 的文章是这个系列的第二篇。就像《星球大战》一样 :)
在本文中，我将探讨一些对 Web 开发人员来说至关重要的浏览器工作原理。
一切是如何开始的
我不想深入探讨这个问题，但为了理解背景，我先简单介绍一下。上世纪90年代中期，爆发了所谓的“浏览器大战”。每家公司除了HTML之外，还有自己的浏览器版本，DOM直到browser enginesW3C强制所有公司采用统一的技术标准。由于至今仍未达成通用标准，所以我们才需要创建跨浏览器版本的Web应用程序。
注意：
浏览器引擎 ≠ 浏览器。
人们常常将浏览器引擎等同于浏览器，但事实并非如此。引擎的功能仅限于解析和显示内容。而浏览器则执行更多、更复杂的任务。正是由于不同的引擎，我们才能支持所有网站。
浏览器架构方案
好的，这到底是怎么运作的？
浏览器运行时会运行多个进程。
备注：
计算机程序本身只是一系列被动的指令。而进程则是这些指令的直接执行。进程可以生成其他进程以及共享父进程资源的线程。
由于本文中我们将浏览器视为 Web 开发环境中的一个环节，因此我们只对一个过程感兴趣—— rendering process。
想法：
或许将来我会更仔细地研究一下浏览器方面的工作。
浏览器会为每个标签页启动一个进程。此外，现代浏览器还会rendering process为每个标签页运行一个子进程iframe。这样做是为了隔离每个标签页及其子iframe进程。如果任何子进程发生故障，则终止该子进程，而不是主进程。这被称为进程间隔离site isolation。
进程rendering process间隔离运行多个线程。我们只考虑主线程。进程间隔离中的几乎所有工作rendering process都由浏览器引擎完成。
目前主要的浏览器引擎有：
- 眨。
- 壁虎
- WebKit
备注：
在开发过程中，您还应该考虑EdgeHTML，但很快Microsoft就会完全放弃它。
现在我们来看看绘制页面时会发生什么。
这是一个简化模型
首先，资源（HTML和CSS）被解析并转换为对象树。然后将它们组合起来，并基于它们构建另一个树—— render tree。该树仅包含将在屏幕上绘制的元素。
备注：
样式为display: none“-”的元素将不会包含在此树状图中，因为该元素没有自己的视觉表示。
之后，遍历这棵树，计算它们在屏幕上的大小和位置。这个过程称为layout（或flow在 Firefox 中）。
然后，将所有计算出的元素绘制到屏幕上。
让我们逐点讨论。
HTML解析。
许多解析器都基于 `<script>` 标签context free grammar，这使得它们能够高效运行。但解析的主要问题HTML在于它不能使用 `<script>` 标签定义context free grammar。这是因为浏览器需要跟踪 `<script>` 标签的HTML编写方式。如果标签在某个地方没有正确闭合，浏览器就会将其关闭，以此类推。即使您没有犯错，这种特性也会大大降低解析速度。
解析的另一个重要特性HTML是它遇到 ` <script><script>` 标签时的反应。解析会暂停，直到脚本执行完毕，然后才会继续执行。因此，你应该将脚本放在 `<script>`</body>标签之前，或者使用 `<script>`async和`<script>`标签defer——这样就可以在解析的同时加载脚本。asyncdefer
REMARK 的
defer不同之处在于它保证了执行顺序。
需要注意的是，如果脚本非常大，浏览器会开始分配单独的流并尝试优化下载。
当解析器遇到CSS样式加载阻塞解析时，也会出现类似的情况。
CSS解析。
CSS 解析不像解析 HTML 那样存在此类问题，原则上两者并无不同。
依恋
此时，渲染树开始构建。
布局（流程）
形成树状图后render tree，计算该树状图中各元素的位置和几何尺寸。
速度layout直接取决于你写的内容质量 CSS。
这是什么意思？
这意味着每条CSS规则都需要应用于一个单独的DOM节点。这是通过递归遍历HTML树（即另一棵树）来实现的CSS。而且，代码越复杂CSS，耗时就越长。
CSS选择器的性能并不相同。
最高效的选择器是：#(id)，.(Class)效率稍低的选择器是：。type(for ex. - h1)
属性组合效率不高，效率最低的选择器是pseudo elements：。
备注：
有多种css methodologies基于有效选择器的选择方法。
绘画
在这里，图像被构建并发送到处理器，GPU以便将其绘制到屏幕上。
layout过程就是这样。
备注
来源
在浏览器中，您可以在开发者工具中启用一种模式，该模式将显示元素的渲染情况。
结论
我们已经探讨了浏览器的主要方面。在接下来的文章中，我们将涉及更多有趣的内容。
后记。
非常感谢您的关注。希望对您有所帮助🙏
关注我，我会更有动力写新文章😌
期待您的反馈。
再见！😉
