DOMContentLoaded

MDN上的描述：

https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded

 

DOMContentLoaded事件，在HTML文档加载和解析完成之后触发，不会等待stylesheets, images, and subframes加载结束。

需要注意：DOMContentLoaded事件，是在页面中每个静态script标签中的同步js加载执行完成之后触发。

以下例子：

<script>
    document.addEventListener('DOMContentLoaded', function () {
        console.log('DOMContentLoaded');
    })
</script>
<script src="test.js"></script>

// test.js
console.log('test.js');

控制台输出的顺序："test.js" "DOMContentLoaded"。DOMContentLoaded事件会等待页面中的同步脚本执行完成之后，再触发。

若在引入test.js的script标签上加上async属性：

<script src="test.js" async></script>

那么，DOMContentLoaded事件会提前触发，而不会等待test.js加载执行完成。同样，使用requirejs加载js文件也是异步的，与使用async的情况相同。

 

遇到过的问题：使用requirejs

require(['commonjs', 'tool/core.trace']);

在tool/core.trace模块中绑定了DOMContentLoaded事件，该事件回调中会向后端发送一个请求，但是在实际中发现，这个请求并不是会100%发送（发送情况随机，有时候会发送请求），原因是tool/core.trace模块的加载是异步的，它加载完成之前，DOMContentLoaded事件有可能已经触发，因此在tool/core.trace模块加载完成之后，该模块中绑定的DOMContentLoaded事件回调不会执行。

 

另外，window.onload事件在页面上所有资源都加载完成之后执行。