资源载入和页面事件 load, ready, DOMContentLoaded等

资源载入和页面事件

理想的页面载入方式

解析HTML结构。

载入并解析外部脚本。

DOM树构建完成，运行脚本。//DOMInteractive –> DOMContentLoaded

载入图片、样式表文件等外部文件。

页面载入完成。//window.onload

涉及到的事件

window.onload:

当页面全部载入完成（包含全部资源）

document.onload:

当整个html文档载入的时候就触发了。也就是在body元素载入之前就開始运行了

DOMContentLoaded:

当页面的DOM树解析好而且须要等待JS运行完才触发

DOMContentLoaded事件不直接等待CSS文件、图片的载入完成

onreadytstatechange:

当对象状态变更时触发这个事件，一旦document的readyState属性发生变化就会触发

defer和async

没有defer和async

浏览器会马上载入并运行指定的脚本，不等待兴许载入的文档元素，读到就载入并运行。

当载入脚本时会堵塞页面的渲染。

有async

载入和渲染兴许文档元素的过程将和脚本的载入与运行并行进行。体现出来就是异步。

async JS一旦下载好了就会运行，所以非常有可能不是依照原本的顺序来运行的。

假设脚本前后有依赖性。用async。就非常有可能出错。

有defer

载入兴许文档元素的过程将和脚本的载入并行进行。

可是脚本的运行要在全部元素解析完成之后。DOMContentLoaded事件触发之前完成。

defer JS在DOMInteractive后运行。一旦运行完defer JS。就会触发DOMContentLoaded。

也就是说defer脚本总是在DOMInteractive事件与DOMContentLoaded事件之间的时间运行。

defer JS在html页面解析完成之后再去运行，也就是相似于把这个脚本放在了页面底部。

DOM的载入与解析

DOMLoading

浏览器開始解析dom树的时间点

DOMInteractive

表示浏览器已经解析好dom树了。

DOMContentLoaded

同步的JS已经运行完成了。

load的实现

作用：监控整个文档（包含资源）是否载入完成。全部资源载入完成后触发

原生js写法：

window.onload = function(){

}

jquery写法：

$(document).load(function(){

});

document.ready的实现

作用：监控dom是否载入完成，dom载入完成时及资源载入之前触发

原生js写法：

document.ready = function(callback) {
if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', function() {
document.removeEventListener('DOMContentLoaded', arguments.callee, false);
callback();
}, false);
}else if (document.attachEvent) {// 兼容ie
document.attachEvent('onreadytstatechange', function() {
if (document.readyState == "complete") {
document.detachEvent("onreadystatechange", arguments.callee);
callback();
}
});
}
}

下面为jquery的写法：

$(function(){

});

$(document).ready(function(){

});

//jquery中默觉得document对象
$().ready(function(){

});