A brief analysis of jquery selector engine sizzle_jquery

I'm sorry! I have been using jquery for about a year, and I only know $(selector), and the flow of its internal selector is not clear at all! So I looked at the source code of jquery. The selector engine used by jquery is sizzle, which is another open source project by the author of jquery. It is available on github and is known as the fastest dom selector! Less than 2000 lines of code.

The above is not a very exciting opening statement. Let’s give a for example: How does $('.test') process in jquery?
1. First make the following judgment

Copy the code The code is as follows:

/ **
*About querySelectorAll function
*Returns all elements matching a specific selector in the current document
*var nodelist = element.querySelectorAll("div.test");
*Supports browser ie8 ,Chrome,Firefox(3.5)
* If you are not sure, you can google it
*/
if ( document.querySelectorAll ) {
(function(){
var oldSizzle = Sizzle,
div = document.createElement("div"),
id = "__sizzle__";
div.innerHTML = "

";
// Safari can't handle uppercase or unicode characters when
/ / in quirks mode.
if ( div.querySelectorAll && div.querySelectorAll(".TEST").length === 0 ) {
return;
}
Sizzle = function( query, context , extra, seed ) {
//Use querySelectorAll to query
}
}

If your browser is ie8 or Google, directly use the built-in querySelectorAll(". test") returns the dom structure. If you are using ie6, then the following things happen
2. If querySelectorAll is not supported, the internal sizzle will be started. The following is the process

Copy the code The code is as follows:

/**
.sizzle via
chunker = /((?:((?:([^()] )|[^()] ) )|[(?:[[^[]]*]|[ '"][^'"]*['"]|[^[]'"] ) ]|\.|[^ > ~,([\] ) |[> ~])(s*,s *)?((?:.|r|n)*)/g
This regular rule matches,
. Match the parameter '.test' we passed into '.test' and put it into the array
. Check whether the browser supports getElementsByClassName. If it supports it, return dom through this function. If it does not support this function, use context.getElementsByTagName("*"). Select all elements through the context. After looping, select className = The elements of 'test' are put into the array and returned to dom.*/

ok, the above is $('.test' ) process, if you are confused, you can look at the source code and debug it.
About the sizzle selector
Personally, I think the sizzle selector is an enhanced version of the querySelectorAll function, because querySelectorAll does not support 'div.test. :eq(1)' Such selector and css3 selection!
When characters like nth|eq|gt|lt|first|last|even|odd do not appear in your selector, from right to left, so-called From right to left, for example $('div img') will first select all imgs and filter them based on whether the parent is a div. The reason this is very efficient is that only one DOM query is performed!
When a character like 'eq(1)' appears in your selector, it becomes normal, from left to right! This is because the result set needs to be filtered.

Thinking $('div img:eq(0)') or $('div img').first(), which one is more efficient? Personally, I think the latter one is higher because the first one from left to right is inefficient! Not tested! Theoretical derivation!

Today I briefly looked at the process, but I didn’t study the specific code in detail! The good ideas here are worth learning and absorbing
Welcome to Paizhuan