22 | DOM树：JavaScript是如何影响DOM树构建的？
李兵
该思维导图由 AI 生成，仅供参考
而在渲染流水线中，后面的步骤都直接或者间接地依赖于 DOM 结构，所以本文我们就继续沿着网络数据流路径来介绍 DOM 树是怎么生成的。然后再基于 DOM 树的解析流程介绍两块内容：第一个是在解析过程中遇到 JavaScript 脚本，DOM 解析器是如何处理的？第二个是 DOM 解析器是如何处理跨站点资源的？
什么是 DOM
从网络传给渲染引擎的 HTML 文件字节流是无法直接被渲染引擎理解的，所以要将其转化为渲染引擎能够理解的内部结构，这个结构就是 DOM。DOM 提供了对 HTML 文档结构化的表述。在渲染引擎中，DOM 有三个层面的作用。
从页面的视角来看，DOM 是生成页面的基础数据结构。
从 JavaScript 脚本视角来看，DOM 提供给 JavaScript 脚本操作的接口，通过这套接口，JavaScript 可以对 DOM 结构进行访问，从而改变文档的结构、样式和内容。
从安全视角来看，DOM 是一道安全防护线，一些不安全的内容在 DOM 解析阶段就被拒之门外了。
简言之，DOM 是表述 HTML 的内部数据结构，它会将 Web 页面和 JavaScript 脚本连接起来，并过滤一些不安全的内容。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
JavaScript对DOM树构建的影响是本文的核心内容。文章首先介绍了DOM的生成流程和HTML解析器的工作方式，强调了JavaScript在DOM生成过程中的作用。通过详细解释字节流转换为DOM的三个阶段，以及示例代码演示了DOM树的生成过程，为读者提供了清晰的技术概览。文章还讨论了JavaScript脚本对DOM生成的阻塞影响，以及外部CSS文件对JavaScript执行的影响。此外，还介绍了一些加速生成DOM的方案，以及渲染引擎的安全检查模块XSSAuditor。总体而言，本文深入浅出地介绍了JavaScript对DOM树构建的影响，为读者提供了技术上的深入理解和优化方案。
仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《浏览器工作原理与实践》，新⼈⾸单¥59
《浏览器工作原理与实践》，新⼈⾸单¥59
立即购买
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(66)
- 最新
- 精选
忘忧草的约定老师请问一下：主线程在parseHtml时，是不是没办法执行执行paint等操作、那这时候页面又是如何绘制出来的呀？作者回复: 如果正在执行ParserHTML，那么页面只会显示之前绘制好的内容，举个极端点的例子，比如ParserHTML占用了主线程10秒，那么这10秒内，页面都不会发生新的绘制操作，也就是页面卡顿了10秒！
2019-11-16411
叫我大胖就好了我看MDN写的是defer在DOMContentLoaded 前执行作者回复: 你是对的，我写错了。
2019-09-264- 木瓜777您好，网络进程接收到响应头之后，会根据请求头中的 content-type 字段来判断文件的类型，比如 content-type 的值是“text/html”！ 这个地方应该是根据响应头判断文件类型吧？
作者回复: 嗯 是响应头，我改过来
2019-09-272 
LukeCSS不阻塞dom的生成。 CSS不阻塞js的加载，但是会阻塞js的执行。 js会阻塞dom的生成，也就是会阻塞页面的渲染，那么css也有可能会阻塞页面的渲染。 如果把CSS放在文档的最后面加载执行，CSS不会阻塞DOM的生成，也不会阻塞JS，但是浏览器在解析完DOM后，要花费额外时间来解析CSS，而不是在解析DOM的时候，并行解析CSS。 并且浏览器会先渲染出一个没有样式的页面，等CSS加载完后会再渲染成一个有样式的页面，页面会出现明显的闪动的现象。 所以应该把CSS放在文档的头部，尽可能的提前加载CSS；把JS放在文档的尾部，这样JS也不会阻塞页面的渲染。CSS会和JS并行解析，CSS解析也尽可能的不去阻塞JS的执行，从而使页面尽快的渲染完成。2019-09-2527123
Angus会显示time.geekbang和test，JavaScript代码执行的时候第二个div还没有生成DOM节点，所以是获取不到div2的，页面会报错Uncaught TypeError: Cannot set property 'innerText' of undefined。 另外复习了下async和defer： async：脚本并行加载，加载完成之后立即执行，执行时机不确定，仍有可能阻塞HTML解析，执行时机在load事件派发之前 defer：脚本并行加载，等待HTML解析完成之后，按照加载顺序执行脚本，执行时机在DOMContentLoaded事件派发之前2019-09-24851
Geek_93f234网络进程加载了多少数据，HTML 解析器便解析多少数据。这里有一个问题，如果是边加载边解析，那么一个标签还在网络传输过程中，浏览器还没有接受到script这个词段，那么浏览器又是怎么预加载的呢？2020-05-021020
欣欣向荣的万七七讲得太赞了！一直以来我都只记着加载表现结果（大部分文章都并不知道细节原因，而只能从做测试得到的结果来推测）。而老师的视角则可以从运行时进行讲解 这种知识是很难得的呀～2019-10-026
mfist开始看文章的时候就在想如果js获取的dom还没有解析出来，会如何处理，结果思考题就是这个。 会两行显示，一行是time.geekbang 另外一行是test。原因是script脚本执行的时候获取想不到第二个div，所以不会对后来的div有影响。 今日总结： 1. 首先介绍了什么是DOM（表述渲染引擎内部数据结构，它将Web页面和JavaScript脚本连接起来，并过滤不安全内容）、DOM树如何生成（网络进程和渲染进程建立一个流式管道，HTML解析器直接解析，不需要等待text/html类型的接口 接受完毕再进行解析），第一步：通过分词器将字节流转换为Token；第二步：将Token解析为DOM节点；第三步：将DOM节点添加到DOM树中。 2. JavaScript是如何影响DOM生成的？暂停html解析，下载解析执行完毕js之后再进行html解析（如果这期间使用到了cssDom，需要等待相应css过程）。预解析线程的优化（提前加载相应js css文件） 3. 渲染引擎还有一个安全检查模块XSSAuditor用来检测词法安全的2019-09-2416
HoSalt老师，CSSOM的生成依赖于DOM吗？2020-04-1124
sky有个问题，网络传输过程中，传输包有可能是乱序的，如果index.html没有加载完，怎么保证传输回来的index.html字节流不是乱序的呢。这样边加载边解析不会有问题吗？2021-06-0123
收起评论