JavaScript阻塞DOM树

最新推荐文章于 2024-05-10 09:16:01 发布

codingcook

最新推荐文章于 2024-05-10 09:16:01 发布

阅读量831

点赞数

分类专栏：浏览器渲染和流程文章标签： react js javascript

本文链接：https://blog.csdn.net/blue_go_go/article/details/121425719

版权

浏览器渲染和流程专栏收录该内容

1 篇文章 0 订阅

订阅专栏

DOM 树如何生成
在渲染引擎内部，有一个叫HTML 解析器（HTMLParser）的模块，它的职责就是负责将 HTML 字节流转换为 DOM 结构。

HTML 解析器是等整个 HTML 文档加载完成之后开始解析的，还是随着 HTML 文档边加载边解析的？

这个答案就是：HTML 解析器并不是等整个文档加载完成之后再解析的，而是网络
进程加载了多少数据，HTML 解析器便解析多少数据

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

HTML 解析器开始工作时，会默认创建了一个根为 document 的空 DOM 结构

1 <html>
2 <body>
3     <div>1</div>
4       <script type="text/javascript" src='foo.js'></script>
5     <div>test</div>
6 </body>
7 </html>

执行到 JavaScript 标签时，暂停整个 DOM 的解析，执行 JavaScript 代码，不过执行 JavaScript 时，需要先下载 JavaScript 代码。需要重点关注下载环境，因为JavaScript 文件的下载过程会阻塞 DOM 解析，而通常下载又是非常耗时的，会受到网络环境、JavaScript 文件大小等因素的影响。

不过 Chrome 浏览器做了很多优化，其中一个主要的优化是预解析操作。当渲染引擎收到字节流之后，会开启一个预解析线程，用来分析 HTML
文件中包含的 JavaScript、CSS 等相关文件，解析到相关文件之后，预解析线程会提前下载这些文件。

我们知道引入 JavaScript 线程会阻塞 DOM，不过也有一些相关的
策略来规避，比如使用 CDN 来加速 JavaScript 文件的加载，压缩 JavaScript 文件的体积。另外，如果 JavaScript 文件中没有操作 DOM 相关代码，就可以将该 JavaScript 脚本设置为异步加载，通过 async 或 defer 来标记代码，

async 和 defer 虽然都是异步的，不过还有一些差异：
async 标志的脚本文件一旦加载完成，会立即执行；
defer标记的脚本文件，需要DOMContentLoaded 事件之前执行。

1 <html>
2 <head>
3   <style src='theme.css'></style>
4 </head>
5 <body>
6     <div>1</div>
7   <script>
8     let div1 = document.getElementsByTagName('div')[0]
9     div1.innerText = 'time.geekbang' // 需要 DOM
10     div1.style.color = 'red' // 需要 CSSOM
11   </script>
12     <div>test</div>
13 </body>
14 </html>

从上面代码中包含有style样式，它是用来操纵 CSSOM 的，所以在执行 JavaScript 之前，需要先解析 JavaScript 语句之上所有的 CSS 样式。所以如果代码里引用了外部的 CSS 文件，那么在执行 JavaScript 之前，还需要
等待外部的 CSS 文件下载完成，并解析生成 CSSOM 对象之后，才能执行 JavaScript 脚本。而 JavaScript 引擎在解析 JavaScript 之前，是不知道 JavaScript 是否操纵了 CSSOM 的，所以渲染引擎在遇到 JavaScript 脚本时，不管该脚本是否操纵了 CSSOM，都会执行 CSS 文件下载，解析操作，再执行 JavaScript 脚本。所以说 JavaScript 脚本是依赖样式表的，这又多了一个阻塞过程。

从上分析我们知道，JavaScript会阻塞DOM生成，而样式文件又回阻塞javascript的执行

综上解析：
javaScript文件会阻塞DOM树解析
当有样式文件时会执行css文件下载，然后执行JavaScript脚本，解析DOM

codingcook

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JavaScript阻塞DOM树

DOM 树如何生成在渲染引擎内部，有一个叫HTML 解析器（HTMLParser）的模块，它的职责就是负责将 HTML 字节流转换为 DOM 结构。HTML 解析器是等整个 HTML 文档加载完成之后开始解析的，还是随着 HTML 文档边加载边解析的？这个答案就是：HTML 解析器并不是等整个文档加载完成之后再解析的，而是网络进程加载了多少数据，HTML 解析器便解析多少数据网络进程接收到响应头之后，会根据响应头中的content-type字段来判断文件的类型，比如content-type的值
复制链接

扫一扫

专栏目录