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

资源加载和页面事件

理想的页面加载方式

1. 解析HTML结构。
2. 加载并解析外部脚本。
3. DOM树构建完成，执行脚本。//DOMInteractive –> DOMContentLoaded
4. 加载图片、样式表文件等外部文件。
5. 页面加载完毕。//window.onload

涉及到的事件

1. window.onload:
   当页面全部加载完成（包括所有资源）

2. document.onload:
   当整个html文档加载的时候就触发了，也就是在body元素加载之前就开始执行了

3. DOMContentLoaded:
   当页面的DOM树解析好并且需要等待JS执行完才触发
   DOMContentLoaded事件不直接等待CSS文件、图片的加载完成

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

defer和async

1. 没有defer和async
   浏览器会立即加载并执行指定的脚本，不等待后续载入的文档元素，读到就加载并执行。
   当加载脚本时会阻塞页面的渲染。

2. 有async
   加载和渲染后续文档元素的过程将和脚本的加载与执行并行进行，体现出来就是异步。
   async JS一旦下载好了就会执行，所以很有可能不是按照原本的顺序来执行的。
   如果脚本前后有依赖性，用async，就很有可能出错。

3. 有defer
   加载后续文档元素的过程将和脚本的加载并行进行，
   但是脚本的执行要在所有元素解析完成之后，DOMContentLoaded事件触发之前完成。
   defer JS在DOMInteractive后执行，一旦执行完defer JS，就会触发DOMContentLoaded。
   也就是说defer脚本总是在DOMInteractive事件与DOMContentLoaded事件之间的时间执行。
   defer JS在html页面解析完毕之后再去执行，也就是类似于把这个脚本放在了页面底部。

DOM的加载与解析

1. DOMLoading
   浏览器开始解析dom树的时间点

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

3. 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(){

});