While JavaScript provides the load event for executing code when a page is rendered, this event does not get triggered until all assets such as images have been completely received. In most cases, the script can be run as soon as the DOM hierarchy has been fully constructed. The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code. When using scripts that rely on the value of CSS style properties, it's important to reference external stylesheets or embed style elements before referencing the scripts.

In cases where code relies on loaded assets (for example, if the dimensions of an image are required), the code should be placed in a handler for the load event instead.

 jQuery.fn = jQuery.prototype = {  
      constructor: jQuery,  
      init: function( selector, context, rootjQuery ) {  
        // HANDLE: $(function)  
        // Shortcut for document ready  
        // 如果函数，则认为是DOM ready句柄  
        if ( jQuery.isFunction( selector ) ) {  
          return rootjQuery.ready( selector );  
        }  
      },  
      
      ready: function( fn ) {  
        // Attach the listeners  
        jQuery.bindReady(); // 绑定DOM ready监听器，跨浏览器，兼容标准浏览器和IE浏览器  
      
        // Add the callback  
           readyList.add( fn );// 将ready句柄添加到ready异步句柄队列  
      
        return this;  
      }  
    };  

bindReady: function() { // jQuery.bindReady  
        if ( readyList ) {  
          return;  
        }  
 
        readyList =jQuery.Callbacks( "once memory" )// 初始化ready异步事件句柄队列  
 
        // Catch cases where $(document).ready() is called after the  
        // browser event has already occurred.  
        // 如果DOM已经完毕，立即调用jQuery.ready  
        if ( document.readyState === "complete" ) {  
          // Handle it asynchronously to allow scripts the opportunity to delay ready  
          // 重要的是异步  
          return setTimeout( jQuery.ready, 1 );  
        }  
      //下面是一些防御性的编程 故此省略
    ......
}