Working principle and optimization analysis of jQuery selector

Working principle and optimization analysis of jQuery selector_jquery

WBOY

Release： 2016-05-16 18:04:37

Original

1085 people have browsed it

Every time a jQuery object is declared, the jQuery.prototype.init object is returned. Many people do not understand that init is obviously a method of jQuery.fn. In fact, this is not a method, but the constructor of init, because The prototype object of js can be inherited. In addition, the object of js is only a reference and not a copy. The sub-objects of new jQuery, new jQuery.fn and new jQuery.fn.init are the same, except whether they are executed to init. I won’t go into the reasons here, but I’ll talk about why this is the case in the next article.
When we use the selector $(selector,content), init(selectot,content) will be executed. Let’s see how it is executed in inti:

Copy code The code is as follows:

 
if ( typeof selector == "string" ) { 
//Regular matching, see if it is HTML code or Is #id 
var match = quickExpr.exec( selector ); 
//There is no DOM element set, document or jQuery object to be found. 
//selector is in the form of #id
if ( match && (match[1] || !context) ) { 
// HANDLE: $(html) -> $(array) 
//HTML code, call clean to complete the HTML code 
if ( match[1] ){ 
selector = jQuery.clean( [ match[1] ], context ); 
} 
/ / Yes: $("#id") 
else { 
//Determine whether the Dom of id is loaded 
var elem = document.getElementById( match[3] ); 
if ( elem ){ 
if ( elem.id != match[3] ) 
return jQuery().find( selector ); 
return jQuery( elem ); // execution completed return 
} 
selector = []; 
} 
//Non-id form. Search in context or full text 
} else{ 
return jQuery( context ).find( selector ); 
 } 
} 

This means that only the selector written as $('#id') is the fastest, which is equivalent to executing getElementById once, and the subsequent program does not need to be executed again. Of course, often the selector we need is not so simple. For example, we need the CSS under id to be className. There are such writing methods as $('#id.className') and $('#id').find('.className' );The execution results of both writing methods are the same. For example,

will definitely return It is , but the execution efficiency is completely different.
After analyzing the above code, if it is not a simple selector like $('#id'), the find function will be executed. Then let’s see what find does:

Copy code The code is as follows:

 
find: function( selector ) { 
//Find in the current object
var elems = jQuery.map(this, function(elem){ 
return jQuery.find( selector, elem ); 
}); 
//The following code can be ignored, just do some processing 
//The static method test of the js regular object is applied here 
//indexOf("..") You need to understand the syntax of xpath, which is to determine the writing method of the parent node included in the selector 
//The original intention It is to filter the repeated elements of the array 
return this.pushStack( /[^ >] [^ >]/.test( selector ) || selector.indexOf("..") > -1 ? 
 jQuery.unique( elems ) : 
elems ); 
} 

If you write $('#id .className') like this, the extended find('#id .className',document), because the current this is the jQuery array of document, then we are looking at the implementation of the extended find. There are many codes, so we will not list them. In short, it is the dom passed from the second parameter. Start searching for a child node, encounter # to compare ID, encounter . to compare ClassName, and: < - Wait for processing. Then if we want to optimize, should we find a way to minimize the scope of the second parameter context, so that there will be very few traversals?
If we write $('#id').find('.className') like this, then the program will only be executed like this. When it is first init, it will execute getElementById, then it will return, and then execute find('. className', divDocument), divDocument is the div tag that we select for the first time. If there are many DOM objects under the document, will it be a lot less times to only traverse the divDocument this time, and the speed of selecting the id for the first time is also Much faster than traversing.
Everyone should understand now. That is to say, the first-level selection is best to use ID, but a simple selector. The purpose is to define the range and improve the speed. I will talk about this this time. Optimization of the selection writing method and other optimizations will be discussed next time.