jquery ready function to deeply analyze _c language

Recently read some about jquery ready some people say he is slow, some people say he is quick, the argument is mixed. So I studied it in depth. First, I looked at the jquery document. About Ready Description

While JavaScript provides the "Load event for executing code" when a page was rendered, this event does not get triggered unt Il all assets such as images have been completely. In most cases, the script can be run as soon as the DOM hierarchy has been fully. The handler passed to. Ready () are guaranteed to being executed after the DOM is ready Ttach all other event handlers and run other jQuery code. When using scripts this rely on the value of CSS style properties, it's important to reference external stylesheets or EMB Ed style elements before referencing the scripts.

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

Translate

Although JavaScript provides the Load event, the function is executed when the page is rendered complete, so that the function is not invoked until the element is loaded, such as an image. But in most cases, as soon as the DOM structure is loaded, the script can run as quickly as possible. The event handle passed to the. Ready () executes immediately after the DOM is ready, so it is usually best to get the binding event handle and other jquery code here. However, when a script relies on CSS style properties, be sure to introduce an external style or inline style element before the script.

If your code relies on elements that need to be loaded (for example, to get a picture's size), you should replace it with the. Load () event and place the code in the Load event handle.

According to the document above, there are a large number of document structure in the page, picture resources, ready is faster than the load. The document also clearly analyzes when to use ready when using load.

Here's an analysis of the jquery ready run process

$ (handler) or $ (document). Ready (handler) →ready () →bindready () → Execute readylist.add (FN) fn

A general look at the source code

The following is the object of jquery's ready source code

 Jquery.fn = Jquery.prototype = {  
      constructor:jquery,  
      init:function (selector, context, rootjquery) {  
        //HAN Dle: $ (function)  
        //shortcut for document ready  
        //If function, it is considered DOM ready handle if  
        (jquery.isfunction (selector)) { return  
          Rootjquery.ready (selector);  
        }  
      ,  
      
      ready:function (FN) {  
        //Attach The listeners  
        Jquery.bindready (); Bind Dom ready Listener, Cross-browser, compatible standard browser and IE browser  
      
        //ADD  
           the callback Readylist.add (FN);//Add ready handle to Ready asynchronous handle queue  
      
        return this;  
      }  
    ;  

Call jquery's Bindready, add ready callback!

Here's a look at Bindready General source

Bindready:function () {//Jquery.bindready  
        if (readylist) {return  
          ;  
        }  
 
        Readylist =jquery.callbacks ("Once Memory")//Initialize Ready asynchronous event handle Queue  
 
        //Catch cases where $ (document). Ready () is called aft ER the  
        //browser event has already occurred.  
        If the DOM is finished, call Jquery.ready if  
        (document.readystate = = "complete") {  
          //Handle It asynchronously to allow SCR IPTs the opportunity to delay ready  
          //important is the asynchronous return  
          settimeout (Jquery.ready, 1);  
        }  
      Here are some defensive programming so omit
    ...
}

This should be very clear document.readystate = = ' complete ' will execute jquery ready, I am puzzled why is settiemout (jquery.ready,1), please return to see the code above ready, R Eadylist.add (FN), if not asynchronous, the execution of the callback is placed before Readylist.add (FN), because execution is in the Ready of jquery Readylist.firewith (document, [JQuery ); Readylist is the callbacks of jquery, which is the management callback function! It is not clear that you can look at the document.

Note: You will find that there are two ready, these two are different, one put to Jquery.prototype is US $ (doucument). Ready this, another is the method of jquery's object method to determine whether it has been ready

Ps:jquery profound, the article has the mistake Place, also requests everybody to correct me!

The above is the jquery ready data collation, follow-up to continue to collate relevant information, thank you for your support of this site!