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 );          }        //下面是一些防御性的編程 故此省略    ......}