资源载入和页面事件
理想的页面载入方式
- 解析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(){
});