执行次序
DOMContentLoaded -> angular启动 -> onload
jQuery的 $(document).ready() 方法，就是对DOMContentLoaded事件的监听（其内部会通过模拟DOMContentLoaded事件和监听onload事件来提供降级方案）。通常推荐在DOMContentLoaded事件触发的时候为DOM元素注册事件。
假设首页页面代码如下：
<!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标签】执行完后再触发事件回调
原文：http://www.cnblogs.com/hellohello/p/7531904.html