The fastest selector in jQuery is the ID selector because it comes directly from the getElementById () method of JavaScript.
1. always inherit from the ID Selector
The fastest selector in jQuery is the ID selector because it comes directly from the getElementById () method of JavaScript.
For example, there is an HTML code:
The Code is as follows:
If the following selector is used, the efficiency is inefficient.
Var traffic_button = $ ("# content. button ");
Because the button already has an ID, we can directly use the ID selector. As follows:
Var traffic_button = $ ("# traffic_button ");
Of course, this is only for a single element. If you need to select multiple elements, this will inevitably involve DOM traversal and loops,
To improve performance, we recommend that you inherit from the latest ID.
As follows:
Var traffic_lights = $ ("# traffic_light input ");
2. Use the tag (tag Name) before the class)
In jQuery, the second fastest selector is the tag selector (for example, $ ("head ")).
This is because it comes from the native getElementsByTagName () method.
Continue to read the HTML code:
The Code is as follows:
For example, you need to select a red-green Single-stick,
You can use a tag name to restrict (modify) class, as shown below:
Var active_light = $ ("input. on ");
Of course, you can also combine the nearest ID, as shown below:
Var active_light = $ ("# traffic_light input. on ");
When using tags to modify the class, we need to pay attention to the following points:
(1) do not use tags to modify the ID, as shown below:
Var content = $ ("p # content ");
In this way, the selector first traverses all p elements and then matches # content.
(It seems that this problem does not exist after jQuery changes the selector core from 1.3.1. Cannot be verified .)
(2) do not use ID to modify the ID, as shown below:
Var traffic_light = $ ("# content # traffic_light ");
Note: If you use the attribute selector, try to use the tag as follows:
$ ('P [row = "c3221" comment '{.html (); instead of this: $ ('[row = "c3221" comment '{.html ();
3. cache the jQuery object
Caching jQuery objects is to tell us the habit of caching jQuery objects into variables.
The following is a new piece of code written by jQuery:
The Code is as follows:
$ ("# Traffic_light input. on"). bind ("click", function (){...});
$ ("# Traffic_light input. on" ).css ("border", "1px dashed yellow ");
$ ("# Traffic_light input. on" background .css ("background-color", "orange ");
$ ("# Traffic_light input. on"). fadeIn ("slow ");
But remember not to do this.
We should first cache the object into a variable before the operation, as shown below:
The Code is as follows:
Var $ active_light = $ ("# traffic_light input. on ");
$ Active_light.bind ("click", function (){...});
Using active_light.css ("border", "1px dashed yellow ");
$Active_light.css ("background-color", "orange ");
$ Active_light.fadeIn ("slow ");
Remember, never let the same selector appear multiple times in your code.
Note: (1) to distinguish between common JavaScript objects and jQuery objects, you can add the $ symbol before the first letter of the variable.
(2) The above code can be improved using jQuery's chained operation. As follows:
The Code is as follows:
Var $ active_light = $ ("# traffic_light input. on ");
$ Active_light.bind ("click", function (){...})
. Css ("border", "1px dashed yellow ")
. Css ("background-color", "orange ")
. FadeIn ("slow ");
If you want to use jQuery objects in other functions, you must cache them to the global environment.
The following code is used:
The Code is as follows:
// Define an object globally (for example, window object)
Window. $ my = {
Head: $ ("head "),
Traffic_light: $ ("# traffic_light "),
Traffic_button: $ ("# traffic_button ")
};
Function do_something (){
// Now you can reference the stored results and operate on them
Var script = document. createElement ("script ");
$ My. head. append (script );
// When you perform an internal operation in the function, you can continue to save the query to the global object.
$ My. cool_results = $ ("# some_ul li ");
$ My. other_results = $ ("# some_table td ");
// Use the global function as a common jquery object.
Export my.other_results.css ("border-color", "red ");
Using my.traffic_light.css ("border-color", "green ");
}
// You can also use it in other functions
This is the end of jQuery performance optimization guide (1). See Guide (2 ). Http://www.artzstudio.com/2009/04/jquery-performance-rules/chinese translation :http://rlog.cn/350 & http://cssrain.cn
