为什么要在脚本标记中添加 async 或 defer？-1.加载与 DOMContentLoaded 的比较
最编程
2024-03-04 07:49:11
...
load :
当整个页面及所有依赖资源如样式表和图片都已完成加载时，将触发load事件。
它与DOMContentLoaded不同，后者只要页面DOM加载完成就触发，无需等待依赖资源的加载。
DOMContentLoaded :
当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完全加载。另一个不同的事件 load 应该仅用于检测一个完全加载的页面。
注意： DOMContentLoaded 事件必须等待其所属 script 之前的样式表加载解析完成才会触发。
可以参考下面这段代码效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#aaa{
width: 600px;
height: 300px;
background-color: pink;
}
#aaa>div{
width: 100px;
height: 100px;
background-color:black;
}
</style>
</head>
<script>
window.addEventListener("load", function(event) {
console.log("page is fully loaded 页面已完全加载");
});
document.addEventListener("DOMContentLoaded", function(event) {
console.log("DOM fully loaded and parsed DOM已完全加载和解析");
});
for(var i=0; i<1000000000; i++){
// 这个同步脚本将延迟DOM的解析。
// 所以DOMContentLoaded事件稍后将启动。
}
</script>
<body>
<div id="aaa">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
来看看控制台中是怎么打印的????
上一篇： 了解脚本标记的延迟和同步