DOMContentLoaded与load的区别

（参考https://www.cnblogs.com/caizhenbo/p/6679478.html）

一、HTML的内容加载以及关于JS的执行顺序

浏览器对HTML内容的加载是顺序加载，所以为了避免用户加载页面时等待过长时间甚至在JS脚本执行时浏览器还没有加载到其中相关的内容，我们尽量把JS脚本放在HTML的最后，即</body>之前。也可以使用window的onload事件，onload事件在整个页面都加载完成后才触发，把JS脚本放在onload里执行。

二、DOMContentLoaded与load

DOMContentLoaded与load的触发时机不同，先触发DOMContentLoaded事件，后触发load事件。

DOMContentLoaded是DOM内容加载完毕，也就是说从页面空白到加载出内容，这段时间会触发DOMContentLoaded事件，而这时页面中可能有图片还未加载完成。也就是说，在任何情况下，DOMContentLoaded的触发不需要等待图片等其他资源加载完成。但浏览器解析过程中，若遇到JS脚本，解析将会被中断，处理完脚本才能够继续进行DOM解析。

load则是页面上所有的资源（图片、音频、视频等）被加载以后才会触发load事件。

window onload和document ready的不同也在此，window onload是整个页面加载完成，包括所有的资源文件；document ready是整个DOM结构树解析渲染完成。

我们在JQuery中经常使用的$（document）. ready（function（）{  ……  }）；其实监听的就是DOMContentLoaded事件，而$（document）. load（function（）{  ……  }）；监听的是load事件。在用JQuery的时候，一般将函数调用写在ready方法内，就是页面被解析后，我们就可以访问整个页面的DOM元素，缩短页面的交互时间，提高页面体验。