Develop a good habit of using the jquery sizzle Selector

Jquery 1.3 named the selector engine sizzle, the first independent module of jquery. In the introduction of sizzle, the primary purpose of sizzle is
It is faster to use the "most commonly used selector" than the previous version of the engine. (What is "the most common selector use", see http://ejohn.org/blog/selectors-that-people-actually-use)
In fact, the application of the selector engine plays a vital role in page performance. Using a proper selector expression can easily improve performance, enhance semantics, and simplify logic. What you need to do is to cultivate a few habits.

= Old habits =
The most common simple selectors include "id selector", "class selector", and "label selector". There is no doubt that the ID selector has the best speed. This depends on the DOM built-in function getelementbyid, followed by the tag selector, using the DOM built-in function getelementsbytag, the worst is the class selector, which needs to parse HTML through regular expressions, in addition, recursive traversal outside the browser kernel cannot be optimized.
As far as the requirement is concerned, the selector in CSS aims to render the style through semantics, while in jquery, most of the cases only aim to select a type of domelement and perform the same logic operation. In the "most commonly used selector", the class selector ranks second with 13.082% of the usage rate. That is to say, in the case of 13.082%, the HTML of the entire document is parsed and recursive to the leaf node of the DOM tree. This part of meaningless performance loss is terrible.

= The most common selector =

Selector

Usage	Statistics
# ID	51.290%	1431
. Class	13.082%	365
Tag	6.416%	179
Tag. Class	3.978%	111
# ID tag	2.151%	60
Tag # ID	1.935%	54
# ID: visible	1.577%	44
# ID. Class	1.434%	40
. Class. Class	1.183%	33
*	0.968%	27
# ID tag. Class	0.932%	26
# ID: hidden	0.789%	22
Tag [name = value]	0.645%	18
. Class tag	0.573%	16
[Name = value]	0.538%	15
Tag	0.502%	14
# ID	0.430%	12
# ID tag	0.358%	10

= Four most important suggestions =
===Start with # ID ====
In any case, add an ID for the selector operation, even if this ID does not exist. Because the selector starts with a relative terminal domnode.

===Use tag. class instead of. Class ====
Jquery official documentation describes the selector performance in the following section:
For example ,". class "is far more popular than" tag. class "even though the second one is much more than T. what's especially important about this is that the degree of performance hit isn't that much of an issue. for example, the difference between 4 ms and 30 ms is always Ally imperceptible.
Tags are limited, while classes can be seen as a way to expand the semantics of tags. In most cases, tags of the same class are the same.

===Try to use parent> child instead of Parent Child ====
">" Is the Child selector. It only matches the child node without recursion. "" Is the descendant selector that recursively matches all subnodes and subnodes (child nodes ).

= Cached jquery object =
If the selected results do not change, you may wish to cache the selected jquery object, even if it is only for a while. For exampleCodeThis kind of performance difference is magnified cyclically. Developing the habit of caching jquery objects allows you to complete major performance optimization inadvertently.

Code
// Case 1
For (I =   0 ; I <   1000 ; I ++ ){
VaR Mylist = $ ( ' . Mylist ' );
Mylist. append ( ' This is list item '   + I );
}
// Case 2
VaR Mylist = $ ( ' . Mylist ' );
 
For (I =   0 ; I <   1000 ; I ++ ){
Mylist. append ( ' This is list item '   + I );
}

If we develop the above four habits, I think our selector performance has been optimized by seven.
The following describes some other selector expressions.

= Other suggestions =
=== Redundant part of the distinct expression ====
Similar to the expressions # Id2 # id1 or tag # id1, there are redundant parts. In fact, only # id1 is required.

===Select a specific form element using [name = x] ====
Although the name selector is written as an attribute selector, the common attribute selector uses recursive traversal of subnodes for matching, and the name selector has a higher resolution priority, and call the DOM built-in function getelementsbyname. Although domelement with name specified but no ID specified in IE and opera can also be obtained using getelementbyid, in jquery, to ensure cross-browser, $ ("# ID ") the system makes more judgments and filters out these inconsistent results. Therefore, the name selector is the only choice under jquery.

===Select the input element of the same type using [: type] ====
This is the only simple method that meets your needs.

=== Conditional reverse selector =
Backward selector refers to an expression similar to ": Not (exp. In fact, the reverse selector performance is not much worse than the forward selector of the same logic. In some cases, to achieve the reverse selector effect, we may need to write complicated expressions, add additional classes, or select the results and filter them again. This is not as good as using the response selector, whether in terms of performance or in keeping the logic simple. In jquery 1.3, the reverse selector is enhanced. Previously, only simple reverse expressions can be accepted. For details about the changes in jquery 1.3, refer to (released by jquery 1.3)

=== Conditional use of Prev + next ===
In the semantic Dom, we often use structures to establish relationships between two domelement to express the meaning of their corresponding entities.
See the following HTML snippet.
<Div id = "entities"> <Div id = "entityid" class = "entity"> <Div class = "namelabel"> name </div> <Div class = "Name "> entityname </div>
When we need to operate on all. namelabel of. entity, we can use $ ("# entities> Div. entity> Div. namelabel") to select. namelabel. The relationship is established through the structure of the. entity and. namelabel parent and child nodes.
However, sometimes we cannot select a proper parent node, such as <DT> </DT> <DD> </DD>, or <label> </label> <input/>.
In fact, adjacent nodes are also the structure of the commonly used expression relationship, and the jquery selector is more efficient than the parent-child selector.
Prev + next is used to represent the relationship between 1-to-1. If there are more than 1-to-1 pairs, you can consider using Prev ~ Siblings

= Conclusion =

Jquery's selector engine is very powerful. Because of this, we should be more cautious and fully use it.

 

 

This article is reproduced from: jquery 1.3 Best Practices (1): Selector