Jquery Performance Optimization

Searching and searching finally found some articles about jquery performance optimization. Of course, you can't forget to add your own summary and understanding to the collections.

First, the jquery chain operation in the previous article is one of jquery's performance optimization methods. The specific implementation and advantages will not be repeated here. Secondly, jquery's optimization is the same as some methods in web optimization.

A. Compress js. Use Code compression technology to reduce the file size. (Use jsmin, YUI Compressor, etc ).

B. Events are bubbling up by default. events that occur in subnodes can be handled by the parent node. When we mention event registration on the parent node, we do not need to register event listening for each subnode.

C. cache: When you want to use a jquery object multiple times, you can cache the jquery object to the variable.

Copy codeThe Code is as follows:
Var nodeTd = $ ("table td ");
Var $ cj = $ ("# cj ");

$ Cj. on ("click", function (){
$Cj.css ("color", "blue ");})

Jquery result cache. If you need to use jquery result objects elsewhere in the program, or the function will be executed multiple times, you can save the result objects to a variable.

D. Try to inherit from the id selector. Because of the uniqueness of id, id selection is the fastest method for jquery to select an element.

Copy codeThe Code is as follows:
$ ("# Firstd"). slideDown (500 );
$ ("# Firstd img"). slideUp (500); // use the id selector to inherit Multiple Elements

E. Use subquery

Copy codeThe Code is as follows:
Zhuye. on ("swiperight", "# data li", function (){
$ (This). find (". delete"). hide ();
}); // Swiperight -- View jquery-mobile api content

F. Use find () instead of context search. The. find () function is faster and used in e.

G. Use jquery's internal function data () to store the status (this is the first time this performance optimization method was seen in Baidu, and his example is also directly referenced ).

Copy codeThe Code is as follows:
$ ('# Head'). data ('name', 'value ');
// Call the following in your application:
$ ('# Head'). data ('name ');

H. Finally, use the new version of jQuery and simplify jquery code.

Copy codeThe Code is as follows:
$ (Document). ready (function (){
});
$ (Function (){
});