window.onload是页面上所有资源加载完
DOMContentLoaded是HTML被parse完
(如果页面中有一个外引 async script和一个外引css,那么当HTML被parse完,这个事件就被触发了、这个css可能刚开始下载,js也可能刚开始下载)
(如果页面中有一个外引 同步 script和一个外引css,那么执行到script的时候,会卡住DOM的构建,由于script可以操作css,这时script也会阻塞住,等待CSS同步获取完成,然后进行script执行,最后触发DomContentLoaded)
$(document).ready 是为了解决兼容问题,jquery实现的一个模拟DOMContentLoaded功能的API,
比如在IE8中,可以用过document.readstatechange的状态监听DOM加载完成,跟高的ie中可以通过
document.documentElement.doScroll('left')(因为这个代码在DOM加载完前会抛出错误)
资料:
https://developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crp
https://stackoverflow.com/questions/44920009/misconception-of-domcontentloaded-event