DOM树：JavaScript是如何影响DOM树构建的？

最新推荐文章于 2022-07-15 10:32:06 发布

狗啃泥

最新推荐文章于 2022-07-15 10:32:06 发布

阅读量320

点赞数

分类专栏：浏览器工作原理与实践

本文链接：https://blog.csdn.net/weixin_44746630/article/details/106674710

版权

本文探讨HTML解析器如何边加载边解析文档，DOM解析过程包括分词生成Token并构建DOM树。JavaScript的执行会阻塞DOM解析，而CSS的下载和解析也会在JavaScript执行前完成，确保样式正确应用。预解析技术则优化了JavaScript和CSS的下载，提高页面加载效率。

摘要由CSDN通过智能技术生成

网络进程加载了多少数据，HTML 解析器便解析多少数据

网络进程接收到响应头之后，会根据响应头中的 content-type 字段来判断文件的类型，比如 content-type 的值是“text/html”，那么浏览器就会判断这是一个 HTML 类型的文件，然后为该请求选择或者创建一个渲染进程。
渲染进程准备好之后，网络进程和渲染进程之间会建立一个共享数据的管道，网络进程接收到数据后就往这个管道里面放，而渲染进程则从管道的另外一端不断地读取数据，并同时将读取的数据“喂”给 HTML 解析器。你可以把这个管道想象成一个“水管”，网络进程接收到的字节流像水一样倒进这个“水管”，而“水管”的另外一端是渲染进程的 HTML 解析器，它会动态接收字节流，并将其解析为 DOM

在这里插入图片描述

第一个阶段，通过分词器将字节流转换为 Token。
分为StartTag 和 EndTag 文本Token
2.后续的第二个和第三个阶段是同步进行的，需要将 Token 解析为 DOM 节点，并将 DOM 节点添加到 DOM 树中。
HTML 解析器维护了一个 Token 栈结构，该 Token 栈主要用来计算节点之间的父子关系，在第一个阶段中生成的 Token 会被按照顺序压到这个栈中

<html>
<body>
    <div>1</div>
    <div>test</div>
</body>
</html

关注