文档对象模型 (DOM)
文档对象模型 (DOM) 将网页链接到脚本或编程语言。 DOM 模型用逻辑树表示文档。 树的每个分支都终止于一个节点，每个节点都包含对象。 DOM 方法允许以编程方式访问树以更改文档的结构、样式和内容。 节点可以与事件处理程序关联，一旦触发风暴，这些事件处理程序就会被执行。
从网络传递到渲染引擎的HTML文件的字节流很难被渲染引擎直接理解，因此必须将其转换成渲染引擎可以理解的内部结构。 这个结构就是DOM。 DOM为HTML文档提供了结构化的叙述。在渲染引擎中，DOM具有三个层次的功能
简而言之，DOM是描述HTML的内部数据结构，它连接网页和JavaScript脚本，并过滤一些不安全的内容
DOM 和 JavaScript
DOM 不是一种编程语言，但是如果没有 DOM，JavaScript 语言就不会有网页、XML 页面以及所涉及的元素的任何概念或模型。 文档中的每个元素（包括整个文档、文档背面、文档中的表格、标题、表格中的文本）都是文档所属的文档对象模型 (DOM) 的一部分，因此它们可以同时使用 DOM 和 JavaScript 等脚本语言来访问和处理。
起初，JavaScript 和 DOM 是交织在一起的，但它们最终演变成两个独立的实体。 JavaScript 可以访问和操作存储在 DOM 中的内容，因此我们可以写出这个近似方程：
API（网页或 XML 页面）= DOM + JS（脚本语言）
DOM树是如何生成的
在渲染引擎内部，有一个名为HTML解析器（HTMLParser）的模块，其职责是将HTML字节流转换为DOM结构。
HTML 解析器不会等待整个文档加载完毕才进行解析，而是在 HTML 文档加载时进行解析。 就是网络进程加载了多少数据，HTML解析器就解析了多少数据。
进程：网络进程收到响应头后，会根据响应头中的content-type字段判断文件的类型。 例如，如果content-type的值为“text/html”，那么浏览器会判断这是一个HTML类型的文件，并根据这个判断选择相应的解析引擎，然后为该文件选择或创建一个渲染进程。要求。 规划好渲染进程后，就会在网络进程和渲染进程之间构建一个共享数据的管道。 网络进程收到数据后，会将其放到管道上，而渲染进程则不断地从管道的另一端读取数据，并同时将读取到的数据发送给HTML解析器。
这条管道可以被认为是“水管”。 网络进程接收到的字节流像水一样倒入这个“水管”中，而“水管”的另一端就是渲染进程的HTML解析器，它动态接收字节。 流，并将其解析为 DOM。
从图中可以看出，字节流到DOM的转换需要三个阶段。
解析 HTML 的三个阶段
在第一阶段，字节流通过分词器转换为Token。
解析 HTML 也是如此。 首先需要通过动词设备将字节流转换为令牌，令牌可以分为Tag Token和Text Token。 对HTML代码进行词法分析生成的Token如下图所示：
从图中可以看出，Tag Token分为StartTag和EndTag。
第二阶段是将Token解析成DOM节点
HTML解析器维护一个Token堆栈结构。 Token栈主要用于估计节点之间的父子关系。 第一阶段产生的Token会按照顺序压入这个栈中。 具体处理规则如下：
动词设备形成的新Token不断压栈和出栈，整个解析过程持续进行，直到分词器完成所有字节流字。
第三阶段是将DOM节点添加到DOM树中
将创建的 DOM 节点添加到文档中，形成 DOM 树。
详细解释HTML解析过程
当 HTML 解析器开始工作时，它会默认创建一个以 document 为根的空 DOM 结构，并将 StartTag document 的 Token 压入栈底。然后，动词解析的第一个 StartTag html Token 将被压入栈底。 stack，会创建一个html DOM节点并添加到文档中，如下图
然后按照同样的流程分析StartTag body和StartTag div，其Token stack和DOM的状态如下图所示：
接下来，解析第一个div的文本Token。 渲染引擎会为Token创建一个文本节点，并将Token添加到DOM中。 它的父节点就是当前Token栈顶元素对应的节点，如下图所示：
接下来，分词器解析第一个 EndTag div。 这时，HTML解析器会判断栈顶的元素是否是StartTag div。 如果是的话，StartTag div就会从栈顶弹出，如下图
按照同样的规则，一路分析，最终结果如下图所示：
通过前面的介绍，相信你已经知道DOM是如何生成的了。 但在实际生产环境中，HTML源文件不仅包含CSS和JavaScript，还包含图片、音频、视频等文件，因此处理过程远比之前的demo复杂。 不过，了解了这个简单的Demo生成流程之后，我们就可以分析越来越复杂的场景了。
JavaScript 如何影响 DOM 生成
如果页面中富含JavaScript脚本javascript 高级dom程序设计，或者引入了脚本文件，那么这个脚本的解析过程与前面的过程会有些不同。
在script标签之前，所有的解析过程仍然和之前介绍的一样，但是当解析script标签时，渲染引擎就判定它是一个脚本。 这时，HTML解析器就会暂停对DOM的解析，JavaScript引擎就会介入，因为JavaScript脚本可能需要改变当前已经生成的DOM结构。
如果通过 JavaScript 文件加载脚本，则需要先下载 JavaScript 代码。 这里需要重点关注下载环境javascript 高级dom程序设计，因为JavaScript文件的下载过程会阻塞DOM解析，一般下载是非常耗时的，会受到网络环境、JavaScript文件大小等因素的影响。
如果脚本是直接嵌入的JavaScript脚本，则直接执行。
如果JavaScript脚本改变了DOM中div的内容，那么执行这个脚本后，已经解析出来的div节点的内容也会改变。 脚本执行后，HTML解析器恢复解析过程，继续解析后续内容，直到生成最终的DOM。
另一种情况是，如果JavaScript代码中出现了修改页面CSS样式的语句来操作CSSOM，那么在执行JavaScript之前，需要解析JavaScript语句上面的所有CSS样式。 因此，如果代码中引用了外部CSS文件，在执行JavaScript之前，需要等待外部CSS文件下载完成，解析并生成CSSOM对象后，才能执行JavaScript脚本。
JavaScript引擎在解析JavaScript代码之前，并不知道JavaScript是否操作CSSOM，所以当渲染引擎遇到JavaScript脚本时，无论该脚本是否操作CSSOM，它都会下载CSS文件，解析操作，然后执行 JavaScript 脚本。 所以 JavaScript 脚本依赖于样式表。
通过前面的分析，我们知道JavaScript会阻塞DOM的生成，样式文件会阻塞JavaScript的执行。 因此，在实际项目中，我们需要重点关注JavaScript文件和样式表文件。 使用不当会影响页面性能。
解析过程中的优化
为了避免页面阻塞，Chrome浏览器做了很多优化，其中主要的优化之一就是预解析操作。 当渲染引擎接收到字节流时，会启动一个预解析线程来分析HTML文件中包含的JavaScript、CSS等相关文件。 解析完相关文件后，预解析线程会提前下载这些文件。
回到DOM解析，我们知道JavaScript线程的引入会阻塞DOM，但是也有一些相关的策略需要避免，比如使用CDN来加速JavaScript文件的加载，压缩JavaScript文件的体积。 另外，如果JavaScript文件中没有DOM相关的代码，可以将JavaScript脚本设置为异步加载，并将代码标记为async或defer。 使用方法如下：
虽然async和defer都是异步的，但还是有一些区别。 使用 async 标志的脚本文件一旦加载，就会立即执行； 而使用 defer 标志的脚本文件需要在 DOMContentLoaded 事件之前执行。
总结
首先我们介绍了 DOM 是如何生成的，然后根据 DOM 生成过程分析了 JavaScript 如何影响 DOM 生成。 还谈到CSS和JavaScript会影响DOM的生成。
生成DOM解析HTML的过程需要通过动词生成器将字节流转换为Token。
如果 StartTag Token 被压入堆栈，HTML 解析器将为 Token 创建一个 DOM 节点，然后将该节点添加到 DOM 树中。 如果动词被解析为文本Token，则会生成一个文本节点，然后将该节点添加到DOM树中。 如果动词解析器解析了EndTag标签，则HTML解析器会检查Token栈顶的元素是否是StarTag div，如果是，则从栈中弹出StartTag div，表明该div元素的解析是完全的。
动词设备形成的新Token不断压栈和出栈，整个解析过程持续进行，直到分词器完成所有字节流字。
如果在解析过程中遇到JavaScript代码，HTML解析就会停止。 如果js是通过脚本加载的，那么会先下载脚本，然后执行。 CSS在执行前也会被解析生成CSSOM。 经历这个过程直到整个 DOM 构建完成。
文章如有错误，请在评论区多多包涵。 如果这篇文章对您有帮助，欢迎点赞？ 并关注？，我希望你会喜欢很多......
