DOMContentLoaded
执行次序
DOMContentLoaded -> angular启动 -> onload
jQuery的 $(document).ready() 方法，就是对DOMContentLoaded事件的监听（其内部会通过模拟DOMContentLoaded事件和监听onload事件来提供降级方案）。通常推荐在DOMContentLoaded事件触发的时候为DOM元素注册事件。
动态插入script
假设首页页面代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function sleep(milliSeconds){
let startTime = new Date().getTime();
while(new Date().getTime() < startTime + milliSeconds){}
}
function log(msg){
console.log(new Date().getSeconds() + "s - " + msg);
}
log("start")
</script>
<script src="1.js"></script>
<script src="2.js"></script>
</head>
<body>
</body>
</html>
1.js
sleep(3000);
2.js
document.write(‘<script src="3.js"></script>‘);
window.addEventListener("DOMContentLoaded",function(){
log("DOMContentLoaded");
});
window.onload = function(){
log("onload");
};
3.js
log(‘3.js开始执行‘); sleep(3000);
运行结果：
生成的html如下：
结论：
DOMContentLoaded 会等待js脚本【包括scipt和动态加入的script标签】执行完后再触发事件回调
时间： 2024-10-04 12:04:10