JQuery的domready和window.onload触发时机

domready是指文档dom元素渲染完毕后所需要的时间。
window.onload则是在页面所有dom元素加上包括所有图片、iframe、link、script加载的资源加载完毕之后所触发的。

那我们进行测试一下，我们在测试页面末尾写入这也一段代码：

document.addEventListener('DOMContentLoaded', function (e) {
    console.log('DOMContentLoaded', +new Date());
}, false);
document.addEventListener('readystatechange', function (e) {
   console.log(document.readyState, +new Date());
}, false);
$(function () {
   console.log('jquery_ready', +new Date());
});
window.onload = function () {
    console.log('onload', +new Date());
}
复制代码

结果可以看到控制台输入如下：

interactive 1524661951489
jquery_ready 1524661951492
DOMContentLoaded 1524661951493
complete 1524661951624
onload 1524661951624
复制代码

这也我们就可以了解到其实JQuery的domready触发时机等同于document.readyState为interactive时和DOMContentLoaded事件所触发的时机。
而window.onload的时间等同于document.readyState为complete时。

转载于:https://juejin.im/post/5ae07c18f265da0b83366caa