Analysis on sizzle of jquery selector Engine

I'm sorry! I have been using jquery for about a year. I only know $ (selector). The internal selector process is completely unclear! After reading the jquery source code, the selector engine used by jquery is sizzle, another open-source project by jquery author. on github, it is called the fastest dom selector! Less than 2000 lines of code.

The above is not a wonderful opening remark. How can I get a for example: $ ('. test') in jquery's process?
1. First, the following judgment will be made:
Copy codeThe Code is as follows:
/**
* About the querySelectorAll Function
* Returns all elements matching a specific selector in the current document.
* Var nodelist = element. querySelectorAll ("div. test ");
* Supports ie8 +, Chrome, and Firefox (3.5) browsers)
* If you do not know, google it.
*/
If (document. querySelectorAll ){
(Function (){
Var oldSizzle = Sizzle,
Div = document. createElement ("div "),
Id = "_ sizzle __";
Div. innerHTML = "<p class = 'test'> </p> ";
// 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, the dom structure is directly returned through the built-in querySelectorAll (". test. If you use ie6, the following occurs:
2. If querySelectorAll is not supported, the internal sizzle will be started. Below is the process
Copy codeThe Code is as follows:
/**
. Sizzle passed
Chunker = /((? :\((? : \ ([^ ()] + \) | [^ ()] +) + \) | \[(? : \ [[^ \ [\] * \] | ['"] [^'"] * ['"] | [^ \ [\]'"] +) + \] | \\. | [^> + ~, (\ [\] +) + | [> + ~]) (\ S *, \ s *)? ((? :. | \ R | \ n) *)/g
This regular expression is matched,
. Match the passed parameter '. test' into'. test' and put it in the array.
. Checks whether the browser supports getElementsByClassName. If getElementsByClassName is supported, dom is returned through this function. If this function is not supported, context is returned. getElementsByTagName ("*"): select all elements from the context. In the loop, select the className = 'test' element and put it in the array to return the dom.
*/

OK. The above is the $ ('. test') process. If you are confused, you can check the source code and debug it.
About sizzle Selector
In my opinion, the sizzle selector is an enhanced querySelectorAll function, because querySelectorAll does not support selector and css3 like 'div. test: eq (1!
When nth | eq | gt | lt | first | last | even | odd is not displayed in your selector, it is right-to-left, for example, $ ('div img ') First Selects all img and filters them by using parent as div. This is very efficient because only one dom query is performed!
When a selector contains a character like 'eq (1) ', it becomes normal, from left to right! This is because you need to filter the result set.
Thoughts
$ ('Div img: eq (0) ') and $ ('div img'). first () which efficiency is high? I personally think the latter one is higher, because the efficiency of the first one is low from left to right! Not tested! Theoretical Derivation!

Today, I roughly looked at the process. The specific code is not detailed! The good ideas here are worth learning and absorbing.
Welcome to shoot bricks