jquery ready関数の詳細分析

最近jquery readyについてゆっくりしている人がいて、速いと言っている人がいて、言い方が違います.そこで自分で深く研究してみました.まずjqueryドキュメントのreadyについての説明を見てみました

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.

翻訳します
JavaScriptはloadイベントを提供しますが、ページレンダリングが完了するとこの関数が実行されるので、要素のロードが完了するまでこの関数は呼び出されません.例えば、画像です.しかし、ほとんどの場合、DOM構造のロードが完了すれば、スクリプトはできるだけ早く実行できます.渡すready()のイベントハンドルはDOMの準備ができたらすぐに実行されるので、通常はバインドイベントハンドルや他のjQueryコードをここに持ってきたほうがいいです.ただし、スクリプトがCSSスタイルのプロパティに依存する場合は、スクリプトの前に外部スタイルまたはインラインスタイルの要素を導入する必要があります.コードがロード済みの要素(例えば、画像のサイズを取得したい)に依存する場合は、使用するべきである.load()イベントの代わりに、コードをloadイベントハンドルに配置します.    
ドキュメントの上の説明によると、ページ内に大量のドキュメント構造があり、画像リソースの場合、readyはloadより速い.ドキュメントの中でも、readyがいつloadを使うかを明確に分析しています.
jquery readyの実行フローを分析します
$(handler) or $(document).ready(handler)→ready()→bindReady()→readyListを実行する.add( fn ) fn
ソースをざっと見て
次はjqueryのオブジェクトのreadyソースです

 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;  
      }  
    };  

jqueryのbindReadyを呼び出し、readyコールバックを追加!
次はbindReadyの大体のソースコードを見てみましょう

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 );  
        }  
      //                
    ......
}

これはよく知っているはずだ.readyState='complete'はjqueryのreadyを実行します.なぜsetteemout(jQuery.ready,1)なのか困っています.上に戻ってreadyのコードを見てください.readyList.add(fn)は、非同期でない場合、コールバックを実行するものはreadyListに格納される.add(fn)の前に、実行はjQueryのreadyの中にあるのでreadyList.fireWith( document, [ jQuery ] );readylistはjqueryのcallbacksで、コールバック関数を管理しています!不明な場合はドキュメントを見ることができます.
注意:readyが2つあることに気づきます.この2つは違います.1つはjqueryに置きます.prototypeは私たちの$(doucument)です.readyこれ、もう一つはjqueryのオブジェクトメソッドがreadyしたかどうかを判断する方法です
ps:jqueryは博大で奥深く、文章に間違いがあるので、ご指摘ください.
以上jquery readyの资料を整理して、それから引き続き関连する资料を整理して、みんなの当駅に対する支持に感谢します!