开会员与付费前请必须阅读这篇文章，在首页置顶第一篇：（进站必看本站VIP介绍/购买须知）
本站所有源码均为自动秒发货，默认（百度网盘）

深入理解HTML解析与DOM构建过程

在前端开发中，我们每天都在和HTML打交道，但你是否真正了解浏览器是如何把一串普通的HTML文本，转化为我们能交互的网页的？今天就让我们一起深入探索HTML解析与DOM构建的全过程，从底层原理出发，搞清楚这一核心机制。

一、HTML解析的前置准备：字节到字符的转换

当我们在浏览器地址栏输入一个URL并按下回车后，浏览器首先会向服务器发起请求，获取到的响应结果其实是一串二进制字节流。这一步是所有解析工作的起点，浏览器会先完成以下转换：

字节解码：浏览器根据响应头中的Content-Type字段（如text/html; charset=utf-8），或者HTML文件中的<meta charset="utf-8">标签，将二进制字节流解码为对应的字符。
字符规范化：统一不同编码格式的字符表示，确保后续解析的一致性。

HTML解析器的核心任务是将字符流转换为DOM树，这是一个渐进式的过程，浏览器会一边下载HTML内容，一边进行解析，不会等到所有内容都下载完成才开始工作。

分词器是HTML解析的第一步，它会把输入的字符流拆分成一个个具有语义的Token，常见的Token类型包括：

分词器会根据HTML5规范中的状态机来识别不同的Token，比如当遇到<字符时，就进入标签识别状态，当遇到>字符时，就表示一个标签Token结束。

分词器生成的Token会被传递给构建器，构建器会根据Token的类型，逐步构建DOM树：

创建DOM节点：当遇到起始标签Token时，构建器会创建一个对应的DOM节点，并将其添加到DOM树中。
维护节点关系：构建器会维护一个栈结构，用来记录当前节点的层级关系。当遇到起始标签时，将对应的节点压入栈中；当遇到结束标签时，将对应的节点从栈中弹出，此时后续创建的节点就会成为弹出节点的父节点的子节点。
处理文本节点：当遇到文本Token时，构建器会创建一个文本节点，并将其添加到当前栈顶节点的子节点列表中。

举个简单的例子，对于以下HTML代码：

Html

复制

<div>

  <p>Hello World</p>

</div>

构建器的工作流程如下：

在HTML解析过程中，脚本和样式的处理比较特殊，它们会影响解析的流程。

默认情况下，当HTML解析器遇到<script>标签时，会立即暂停解析过程，先执行脚本内容，然后再继续解析。这是因为脚本可能会修改DOM结构，比如使用document.write()方法，所以浏览器需要确保脚本执行时，前面的DOM已经构建完成。

不过，我们可以通过以下方式来优化脚本的加载和执行：

CSS样式的加载不会阻塞HTML解析，但会阻塞DOM的渲染。这是因为浏览器需要计算元素的样式，才能确定元素的最终布局和外观，如果样式还没有加载完成，浏览器会先渲染一个空白页面，等到样式加载完成后再重新渲染。

当DOM树构建完成后，浏览器还会进行以下工作：

了解HTML解析与DOM构建的过程，对于我们优化前端性能有着重要的意义：