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
收起评论