资源载入和页面事件 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(){

});