jquery.ready可以在文档加载后尽快执行对文档的操作

jquery 1.12.4中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: IE6-10
        // 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 );

        // Standards-based browsers support DOMContentLoaded
        } else if ( document.addEventListener ) {

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

            // A fallback to window.onload, that will always work
            window.addEventListener( "load", completed );

        // If IE event model is used
        } else {

            // Ensure firing before onload, maybe late but safe also for iframes
            document.attachEvent( "onreadystatechange", completed );

            // A fallback to window.onload, that will always work
            window.attachEvent( "onload", completed );

            // If IE and not a frame
            // continually check to see if the document is ready
            var top = false;

            try {
                top = window.frameElement == null && document.documentElement;
            } catch ( e ) {}

            if ( top && top.doScroll ) {
                ( function doScrollCheck() {
                    if ( !jQuery.isReady ) {

                        try {

                            // Use the trick by Diego Perini
                            // http://javascript.nwbox.com/IEContentLoaded/
                            top.doScroll( "left" );
                        } catch ( e ) {
                            return window.setTimeout( doScrollCheck, 50 );
                        }

                        // detach all dom ready events
                        detach();

                        // and execute any waiting functions
                        jQuery.ready();
                    }
                } )();
            }
        }
    }
    return readyList.promise( obj );
};

从代码中看到判断页面加载完成且可以操作有下面这几个点：

1.document.readyState

　　readyState是一个document的属性，描述document文档加载状态。

　　属性值：　

　　loading：表示文档正在载入。

　　Interactive：文档已经完成加载，且文档已经解析完成，但是像图片，样式表和框架等子资源仍在加载。

　　complete：文档和所有的子资源都完成加载。这个状态表示load事件将被触发。

　　readystate兼容性问题：

　　[1]只支持‘complete’. Opera Presto(欧朋浏览器的Presto引擎)是在load事件之后触发‘complete’（按照在HTML5标准规范这个顺序是错误的）。

　　[2] IE9和IE10 有bug，'interactive' 状态可以在文档完成解析之前触发。

　　[3] IE4这个属性仅适用于document、embed、img、link、object、script和style对象。

 参考：https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState

           https://msdn.microsoft.com/zh-cn/library/ms534359(v=vs.85).aspx

https://html.spec.whatwg.org/multipage/dom.html#current-document-readiness

2.DOMContentLoaded

 当初始HTML文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架完成加载。

　　兼容性：IE8及更早版本没有。在IE8中,可以使用readystatechange事件来检测DOM文档是否加载完毕。在更早的IE版本中,可以通过每隔一段时间执行一次document.documentElement.doScroll("left")来检测这一状态，因为这条代码在DOM加载完毕之前执行时会抛出错误(throw an error)。（所以检测时要catch）

 参考： https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded#Browser_compatibility

 3.doScroll

 doScroll在主文档加载完成后才可调用，它的初始化在onload之前。

doScroll从IE11开始不再支持。可以使用scrollLeft或scrollTop。模拟点击一个滚动条组件。scrollbarDown，点击滚动条的向下箭头。scrollbarPageRight，向右移动一屏内容（如果内容超出一屏的话，否则没有效果）。 

 参考：https://msdn.microsoft.com/en-us/library/ms536414(v=vs.85).aspx

　　　http://javascript.nwbox.com/IEContentLoaded/ 

4.onload

　　在文档装载完成后会触发domcument的 load 事件。此时，在文档中的所有对象都在DOM中，所有图片，脚本，链接以及子框都完成了加载。

　　参考：https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/onload

　　　　　https://developer.mozilla.org/en-US/docs/Web/API/XMLDocument/load

 

其他参考：

http://w3c.github.io/html/syntax.html#the-end

http://www.cnblogs.com/-simon/p/5889722.html

DOMContentLoaded VS onload VS onreadystatechange：http://mutongwu.iteye.com/blog/2207626

jQuery 的 ready 函数是如何工作的？：http://www.cnblogs.com/haogj/archive/2013/01/15/2861950.html