optimize-selectors qSA before Sizzle

Author: mr21

page/performance/optimize-selectors.md

@@ -7,19 +7,28 @@
 
 Selector optimization is less important than it used to be, as more browsers implement `document.querySelectorAll()` and the burden of selection shifts from jQuery to the browser. However, there are still some tips to keep in mind.
 
-## ID-Based Selectors
+## Save calls to `querySelectorAll`
 
-Beginning your selector with an ID is always best.
+```
+// If in your HTML there are 2 .container with 5 div in each,
+// this line will call querySelectorAll 13 times (1 + 2 + 2*5).
+$( ".container" ).children( "div" ).find( ".robotarm" );
 
+// Against only 1 call with this:
+$( ".container div .robotarm" );
 ```
-// Fast:
-$( "#container div.robotarm" );
 
-// Super-fast:
-$( "#container" ).find( "div.robotarm" );
+## Try to segregate the nonstandard parts of your selection
+
+When you select elements, jQuery will call `querySelectorAll` with your selection. If `querySelectorAll` throws an error, jQuery will refer to its Sizzle engine. So, if you are using at least one of these nonstandard pseudo-classes: `:contains()`, `:has`, `:even`, `:submit`, etc. You will not take advantage of the native `querySelectorAll`.
+
 ```
+// A long selection with nonstandard pseudo-classes inside:
+$( "#global.ready .part .list li a:contains('qwerty'):first" );
 
-The `.find()` approach is faster because the first selection is handled without going through the Sizzle selector engine – ID-only selections are handled using `document.getElementById()`, which is extremely fast because it is native to the browser.
+// A long standard selection with a filter outside (faster):
+$( "#global.ready .part .list li a").filter( ":contains('qwerty'):first" );
+```
 
 ## Specificity
 
@@ -51,9 +60,6 @@ A "flatter" DOM also helps improve selector performance, as the selector engine
 Selections that specify or imply that a match could be found anywhere can be very slow.
 
 ```
-$( ".buttons > *" ); // Extremely expensive.
-$( ".buttons" ).children(); // Much better.
-
 $( ".category :radio" ); // Implied universal selection.
 $( ".category *:radio" ); // Same thing, explicit now.
 $( ".category input:radio" ); // Much better.