JQuery Performance Optimization

First, the appropriate selector

The JQuery selector provides a rich selection of selectors to locate DOM elements,

Basic Selector

#id,. class, Element, * and so on; which one of them is more efficient?

First choice:

$ ("#id")

Second choice:

$ ("P"), $ ("div")

Third choice (selective use):

$ (". Class")

Option Four

$ ("[attribute =value"])

V Select (pseudo selector, which belongs to the visibility filter selector in the JQuery filter selector)

$ (": Hidden")

Ps:1, try to select the ID selector,

2. Specify the context for the selector

It is similar to the CSS selector, the three main features of CSS selectors--particularity, inheritance, the particularity of the Cascade:

1. For each id attribute value given by the selector (#id): Plus 0,1,0,0

2. For each class property value given by the selector (. class, attribute selection, pseudo-class such as: visited,: link): Plus 0,0,1,0

3. For each element given by the selector: plus 0,0,0,1

Example: HTML >body table tr[td= "totals"] TD ul > li is 0,0,0,7+ 0,0,1,0 = 0,0,1,7;

Li #answer is 0,0,0,1 + 0,1,0,0 = 0,1,0,1

According to this operation, the winning rule can be obtained:

For example: 0,1,0,1 is greater than 0,0,1,7, its particularity is higher. The higher the priority of the selection.

* belongs to the wildcard selector, which is a 0 particularity

The use of jquery objects in array mode

In terms of performance, it is recommended to use a for or while to handle, not $.each ()

Such as:

$.each (array, function (i)) {

Array[i] = i;

}

Switch

var array = new Array ();

for (var i = 0;i< array.length; i++) {

Array[i] = i;

}

Iii. Event Agents

Example: Clicking a cell, changing the color of a cell

$ (' #table TD '). Click (function ()) {

$ (this). CSS ("Backgroud", "Blue");

}

If the table has 100 TD cells, then there are 100 events bound and the performance will be poor.

You can use the event proxy:

$ (' #table '). Click (function (e)) {

var $clicked = $ (e.target); E.target the target element to be triggered

$clicked. CSS ("Backgroud", "Blue");

}

It only binds one event and improves performance

Iv. join concatenation string

Convert an array to a string

Typically, this performance boost is noticeable when long strings are

var array = [];

for (var i = 0; i<; i++) {

Array[i] = ' <li> ' +i+ ' </li> ';

}

$ ("#list"). HTML (Array.join ("));

You can contact the StringUtils join () in Java, and use the Stringbulider,stringbuffer usage comparison.

V. Using the native JS method

Frequently judging whether a multi-box is selected:

var $ck = $ ("#ck");

$ck. Click (function ()) {

if ($ck. Is (": Checked")) {

Alert ("Checked");

}

})

Switch

var $ck = $ ("#ck");

var ck = $ck. Get (0); JQuery objects are converted to DOM objects in 2 ways jquert.get (0) or jquery[0]

$ck. Click (function ()) {

if (ck.checked)) {

Alert ("Checked");

}

})

Vi. use jquery's elegant chain operation as much as possible

It can reduce the arbitrary creation of objects, or you can create an object to the global environment, allowing other function functions to be called.

JQuery Performance Optimization