jQuery ready方法原理

$(document).ready(function) 在DOM结构就绪时就触发了，但是传统的window.onload则是在DOM加载完毕且所有资源都下载完毕后才触发。

ready是浏览器兼容的，那么就分为两种情况

• 标准浏览器：标准浏览器非常简单，有 DOMContentLoaded 事件，当所有DOM解析完以后会触发这个事件
  
• 非标准浏览器
  非标准浏览器麻烦一些，jquery用两个方式来保证
  
  • 如果浏览器存在 document.onreadystatechange 事件，当该事件触发时，如果 document.readyState=complete 的时候，可视为 DOM 树已经载入
  • doScroll检测：IE浏览器文档中说明，当页面 DOM 未加载完成时，调用 doScroll 方法时，会产生异常。那么我们反过来用，如果不异常，那么就是页面DOM加载完毕了，可以不断地通过能否执行 doScroll 判断 DOM 是否加载完毕

因此总流程就是：

同时，为了保证最后一定会调用ready方法，在上面每一种方式的最后都还是会为load事件绑定ready方法。

if ( document.readyState === "complete" ) {
      // Handle it asynchronously to allow scripts the opportunity to delay ready
      //这里的setTimeout是为了异步
      setTimeout( jQuery.ready, 1 );

    // Standards-based browsers support DOMContentLoaded
    //标准浏览器侦听事件接口：document.addEventListener
    } else if ( document.addEventListener ) {
      // Use the handy event callback
      document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );

      // A fallback to window.onload, that will always work
      //文章一开始说了，这里为了保证一定会触发ready，所以还针对onload也绑定一次回调
      window.addEventListener( "load", jQuery.ready, false );

    // If IE event model is used
    } else {
      //IE侦听事件接口：document.attachEvent
      //如果有onreadystatechange事件，侦听之
      // Ensure firing before onload, maybe late but safe also for iframes
      document.attachEvent( "onreadystatechange", DOMContentLoaded );

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


      // http://javascript.nwbox.com/IEContentLoaded/
      // 见下边说明
      // 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) {}

      //如果是IE并且不是iframe
      if ( top && top.doScroll ) {
        (function doScrollCheck() {
          if ( !jQuery.isReady ) {

            try {
              // Use the trick by Diego Perini
              // http://javascript.nwbox.com/IEContentLoaded/
              //一直调用doScroll滚动，因为DOM渲染结束前，DOM节点是没有doScroll方法的，所以一直会异常
              //直到DOM渲染结束了，这个时候doScroll方法不会抛出异常，然后就调用$.ready()
              top.doScroll("left");
            } catch(e) {
              return setTimeout( doScrollCheck, 50 );
            }

            // and execute any waiting functions
            jQuery.ready();
          }
        })();
      }
    }

参考文章：
jquery的ready方法实现原理
jQuery源码剖析（四）——$(document).ready