JavaScript:wihdow.onload与DOMContentLoaded，onreadystate

最开始对window.onload模糊的理解就是，文档全部加载完之后，再执行某个事件或者函数。对整个执行过程的理解也不是很到位。现在来做个梳理。

1. 文档加载过程

 1. 解析HTML
 2. 加载外部css文件和js文件
 3.  执行文档内的js代码
 4. HTML DOM 全部加载完(不包括外部图片、视频之类的文件)
 5.  加载图片与外部链接文件
 6. 页面全部加载完 

 页面加载过程大致分为以上几个过程，如果把js文件放在底部，加载顺序稍有变动。这个不影响。

 一般情况下，我们都是等待页面加载完之后，才会进行一些DOM的操作

2. onload

window.addEventListener('load',function({
    var main = document.getElementById('main');
    main.style.background = "blue"
})

这种加载比较简单粗暴，容易理解，但是也是最慢的。上面提到过，文档加载大致分为六步，如果用这个方法，必须得等这六步全部执行完，才会执行load中的函数。

3. DOMContentLoaded

window.addEventListener('DOMContentLoaded',function({
    var main = document.getElementById('main');
    main.style.background = "blue"
})

如果我们使用DOMContentLoaded，就比load稍快些，因为它只需要执行文档加载到第三步，该事件就可以执行了。

IE8 并不支持该事件。没关系，有个兼容的写法，IE8提供了onreadystateschange事件。顾名思义，当文旦加载的内容发生变化时，HTML document有调用该方法。当然，不仅仅是HTML document可以调用该方法，applet,embed,frame,frameset,iframe,img,input,image,link,script,xml都可以调用该方法，因为这些标签可以加载数据，它们数据会随着加载的进程还改变。

if(document.addEventListener){
    document.addEventListener('DOMContentLoaded', function(){
    document.removeEventListner('DOMContenLoded',arguments.callee);
})else if(document.attachEvent){
    document.attachEvent('onreadystatechange', function(){
    document.detachEvent('onreadystatechange', arguments.callee,);
}

4.jQueryz中的ready

那我们经常用的jQuery中$(document).ready()是哪种执行方式呢。

看看源码就知道了。

jQuery.ready.promise = function( obj ) {
    if ( !readyList ) {

        readyList = jQuery.Deferred();

        // Catch cases where $(document).ready() is called
        // after the browser event has already occurred.
        // Support: IE9-10 only
        // Older IE sometimes signals "interactive" too soon
        if ( document.readyState === "complete" ||
            ( document.readyState !== "loading" && !document.documentElement.doScroll ) ) {

            // Handle it asynchronously to allow scripts the opportunity to delay ready
            window.setTimeout( jQuery.ready );

        } else {

            // Use the handy event callback
            document.addEventListener( "DOMContentLoaded", completed );

            // A fallback to window.onload, that will always work
            window.addEventListener( "load", completed );
        }
    }
    return readyList.promise( obj );
};

看代码，就知道如果使用了$(document).ready()的话，是执行到第三步就开始执行js代码了。这里用到了readyState ，是为了兼容IE。

参考：
https://developer.mozilla.org/en/docs/web/api/document/readystate
http://stackoverflow.com/questions/3520780/when-is-window-onload-fired
http://help.dottoro.com/ljerfwdm.php