HTML Standard 系列：浏览器是如何一步步解析页面与脚本的？

导言

当我们探索浏览器运行原理时，我们倾向于执行多个例子去推断其内在的设计。在很长一段时间内，这也是笔者探索浏览器这个黑盒的方式。但这么做始终只是验证例子本身，而不能断言浏览器实际的行为。为了追求真理（误），决定写这个系列的文章，从源头探索浏览器的行为准则。

HTML Standard

HTML Standard，即 HTML 标准，是一系列定义 HTML 语言规范的文档。它是浏览器解析页面和脚本的基石。浏览器在解析页面时，会严格遵循 HTML Standard 的规定，逐行逐字地解析 HTML 代码。

页面解析

页面的解析是一个复杂的过程，涉及多个步骤和组件。浏览器在解析页面时，首先会构建一个 HTML 文档树（DOM 树）。DOM 树是一个表示页面结构的树形数据结构。浏览器通过 DOM 树来管理页面元素，并对页面进行渲染和交互。

在构建 DOM 树之前，浏览器会对 HTML 代码进行分词（Tokenization）和标记化（Tagging）。分词是指将 HTML 代码拆分成一个个标记（Token），标记化是指识别标记的类型，并将其分类为元素、属性或文本。

分词和标记化完成后，浏览器会根据标记的类型构建 DOM 树。元素标记会被转换成 DOM 节点，属性标记会被添加到对应的 DOM 节点中，文本标记会被转换成文本节点。

脚本解析

脚本的解析与页面的解析类似，但又有一些不同。浏览器在解析脚本时，会构建一个脚本执行环境（Execution Context）。脚本执行环境是一个独立的作用域，它包含自己的变量、函数和对象。

在构建脚本执行环境之前，浏览器会对脚本代码进行预编译（Precompilation）。预编译是指将脚本代码转换成字节码，以便浏览器可以更高效地执行脚本。

预编译完成后，浏览器会创建一个新的脚本执行环境，并将脚本代码加载到该环境中。脚本代码会在该环境中逐行执行，直到执行完成或遇到错误。

事件循环

事件循环是浏览器用来管理脚本执行和事件处理的机制。事件循环会不断循环，检查是否存在需要处理的事件。如果有事件需要处理，事件循环会将事件传递给相应的脚本执行环境，并执行该环境中的事件处理程序。

事件循环是一个非常重要的机制，它确保浏览器可以响应用户交互和系统事件。如果没有事件循环，浏览器将无法响应用户输入，页面将变得无法交互。

总结

HTML Standard 系列的第一篇，我们深入探讨了浏览器是如何解析页面和脚本的。我们了解了 HTML 标准、页面解析、脚本解析和事件循环。这些知识为我们深入理解浏览器打下了坚实的基础。在接下来的文章中，我们将继续探索浏览器的其他方面，敬请期待！