DOMContentLoaded与load事件

MDN参考：
- DOMContentLoaded
- load

区别

• DOMContentLoaded: DOM解析完成即触发此事件，不等待styles, images等资源的加载
• load：依赖的资源也已加载完成
• DOMContentLoaded绑定到document，load绑定到window

document.addEventListener('DOMContentLoaded', function(event) {  console.log("DOM fully loaded and parsed");  // 先打印});window.addEventListener('load', function(event) {  console.log("img loaded");  // 后打印}); 

jquery的$(document).ready

dom解析完成后即执行，不等待资源的加载。因此在DOMContentLoaded事件触发后执行。内部实现可简略如下

document.ready = function(cb) {    document.addEventListener('DOMContentLoaded', function() {        cb();    });};

注意

1. 应该更适合使用DOMContentLoaded的场合不要使用load, 以免造成不必要的延迟。

   It is an incredibly popular mistake to use load where DOMContentLoaded would be much more appropriate, so be cautious.

2. js 执行的延迟会造成DOM解析延迟，从而延迟触发DOMContentLoaded事件

<script>  document.addEventListener("DOMContentLoaded", function(event) {    console.log("DOM fully loaded and parsed");  });for(var i=0; i<1000000000; i++){} // this synchronous script is going to delay parsing of the DOM. So the DOMContentLoaded event is going to launch later.</script>