js和css的加载造成阻塞

最新推荐文章于 2024-12-12 11:32:36 发布

furfur-jiang

最新推荐文章于 2024-12-12 11:32:36 发布

阅读量508

点赞数

CC 4.0 BY-SA版权

分类专栏：面试 JavaScript

本文链接：https://blog.csdn.net/weixin_44523860/article/details/109706316

面试同时被 2 个专栏收录

94 篇文章

订阅专栏

JavaScript

86 篇文章

订阅专栏

本文总结了JS和CSS在页面加载中的执行规则，强调了DOM解析与脚本加载的关系，介绍了defer和async属性的区别，并讲解了监听加载完成的不同方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

总结一些关键点：

加载或者执行JS时会阻塞DOM树的解析
当DOM被阻塞时（被JS阻止的），若此时刚好有CSS下载执行，那么JS不执行，直到CSS解析完，继续执行JS，解析DOM
当DOM未被阻塞时（无JS），不论CSS是否下载执行，直接解析完DOM树。
由上得出结论：JS和CSS不同时执行（ps:个人观点，欢迎探讨勘误）
JS的加载的并行的，CSS也是
DOM的解析是从<html>开始，到</html>结束，所以放在body之后的<script>不会阻止其他资源的下载，但是浏览器当遇到script标签时会立即执行里面的代码，导致DOM的解析被阻塞。
defer和asyn的异同点

共同点：
- defer 和 async 都是script标签中的属性，
- defer 和 async 在网络读取（脚本下载）这块儿是一样的，都是异步的（相较于 HTML 解析）。
- 仅限外部脚本
两者的差别：
在于脚本下载完之后何时执行，
- defer是立即下载但延迟执行，加载后续文档元素的过程将和脚本的加载并行进行（异步），但是脚本的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。而且defer它是按照加载顺序执行脚本的。
- async是立即下载并执行，加载和渲染后续文档元。对它来说脚本的加载和执行是紧紧挨着的，所以不管你声明的顺序如何，只要它加载完了就会立刻执行。

补充：在没有 defer 或 async的情况下，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。

监听加载完成的四种方式及其区别
window.addEventListener("load",function(){....});极快
当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完全加载。

window.onload = function(){....}

document.body.onload = function(){....}

<body onload = "....">

以上三个方法用于在网页加载完毕后立刻执行的操作，会等到其他资源被加载后才执行。
只会执行其中一个

参考文章运用大量实例证明，很值得一看！
参考文章：https://www.cnblogs.com/bibiafa/p/9364986.html
https://blog.csdn.net/weixin_42925169/article/details/108345843