页面加载的过程中,JS 文件是不是一定会阻塞 DOM 和 CSSOM 的构建?

答案是不一定的

JavaScript阻塞DOM和CSSOM的构建的情况主要集中在以下两个方面:

  • JavaScript文件被放置在head标签内部

当JavaScript文件被放置在head标签内部时,浏览器会先加载JavaScript文件并执行它,然后才会继续解析HTML文档。因此,如果JavaScript文件过大或服务器响应时间过长,就会导致页面一直处于等待状态,进而影响DOM和CSSOM的构建。

  • JavaScript代码修改了DOM结构

在JavaScript代码执行时,如果对DOM结构进行了修改,那么浏览器需要重新计算布局(reflow)和重绘(repaint),这个过程会较为耗时,并且会阻塞DOM和CSSOM的构建。

除此之外,还有一些情况下JavaScript并不会阻塞DOM和CSSOM的构建:

  • 通过设置 script 标签的 async 、defer 属性避免阻塞DOM和CSSOM的构建
    • async:异步加载JavaScript文件,脚本的下载和执行将与其他工作同时进行(例如从服务器请求其他资源、渲染页面等),而不必等到脚本下载完成才开始这些操作。因此,在使用 async 属性时,脚本的加载和执行是异步的,并且不保证脚本在页面中的顺序。
    • defer属性 :属性也告诉浏览器立即下载脚本文件,但有一个重要的区别:当文档解析时,脚本不会执行,直到文档解析完成后才执行。这意味着脚本将按照它们在页面上出现的顺序执行,并且在执行之前,整个文档已经被解析完毕了。
  • Web Workers :Web Workers 是一种运行在后台线程的JavaScript脚本,它不会阻塞DOM和CSSOM的构建,并且可以利用多核CPU提高JavaScript代码执行速度。

总结

在一定情况下,JavaScript的执行会阻塞DOM和CSSOM的构建。

但是,在实际应用中,我们可以通过设置 script 标签的 async、defer 属性、使用Web Workers等方式来避免这个问题。

猜你喜欢

转载自blog.csdn.net/zz130428/article/details/130710353