Do seven things to help you improve the performance of jQuery_jquery

1. Append Outside of Loops

Anything involving the DOM has a price. If you're appending a lot of elements to the DOM, you'll want to append them all at once rather than doing it multiple times. A common problem arises when appending elements to a loop.

Copy code The code is as follows:

$.each( myArray, function( i, item ) {
var newListItem = "

" item "

";
$( "#ballers" ).append( newListItem );
});

A common technique is to use document fragments. On each iteration of the loop, append the element to the fragment instead of the DOM element. When the loop ends, append the fragment to the DOM element.

Copy code The code is as follows:

var frag = document.createDocumentFragment();

$.each( myArray, function( i, item ) {

var newListItem = document.createElement( "li" );
var itemText = document.createTextNode( item );

newListItem.appendChild( itemText );

frag.appendChild( newListItem );

});

$( "#ballers" )[ 0 ].appendChild( frag );

Another simple trick is to continuously build a string on each iteration of the loop. When the loop ends, set the HTML of the DOM element to this string.

Copy code The code is as follows:

var myHtml = "";

$.each( myArray, function( i, item ) {

myHtml = "

" item "

";

});

$( "#ballers" ).html( myHtml );

Of course there are other techniques you can try. A site called jsperf provides a good outlet for testing these properties. The site allows you to benchmark each technique and visualize its cross-platform performance results.

2. Cache Length During Loops

In the for loop, do not access the length property of the array every time; it should be cached in advance.

Copy code The code is as follows:

var myLength = myArray.length;

for ( var i = 0; i

// do stuff

}

3. Detach Elements to Work with Them

Manipulating the DOM is slow, so you want to do it with as little alignment as possible. jQuery introduced a method called detach() in version 1.4 to help solve this problem, which allows you to detach elements from the DOM when operating on them.

Copy code The code is as follows:

var $table = $( "#myTable" );
var $parent = $table.parent();

$table.detach();

// ... add lots and lots of rows to table

$parent.append( $table );

4. Don't Act on Absent Elements

If you are planning to run a lot of code on an empty selector, jQuery will not give you any hints - it will continue to execute as if no errors occurred. It's up to you to verify how many elements the selector contains.

Copy code The code is as follows:

// Bad: This runs three functions before it
// realizes there's nothing in the selection
$( "#nosuchthing" ).slideUp();

// Better:
var $mySelection = $( "#nosuchthing" );

if ( $mySelection.length ) {

$mySelection.slideUp();

}

// Best: Add a doOnce plugin.
jQuery.fn.doOnce = function( func ) {

this.length && func.apply( this );

return this;

}

$( "li.cartitems" ).doOnce(function() {

// make it ajax! o/

});

This guide is particularly useful for jQuery UI widgets that require a lot of overhead when the selector does not contain an element.

5. Optimize Selectors

Selector optimization is not as important as in the past, because many browsers implement the document.querySelectorAll() method and jQuery shifts the burden of the selector to the browser. But there are still some tips to keep in mind.

ID-based selector

It's always best to start your selector with an ID.

Copy code The code is as follows:

// Fast:
$( "#container div.robotarm" );

// Super-fast:
$( "#container" ).find( "div.robotarm" );

Using the .find() method will be faster because the first selector has been processed without going through the noisy selector engine--ID-Only selectors already use the document.getElementById() method Processing is fast because it is native to the browser.

Specificity

Describe the right side of the selector in as much detail as possible, and do the opposite for the left side.

Copy code The code is as follows:

// Unoptimized:
$( "div. data .gonzalez" );

// Optimized:
$( ".data td.gonzalez" );

Try to use the form of tag.class to describe the selector on the rightmost side of the selector, and try to use only tag or .class on the left side.

Avoid overuse of specificity

Copy code The code is as follows:

$( ".data table.attendees td.gonzalez" );

// Better: Drop the middle if possible.
$( ".data td.gonzalez" );

Going for the "DOM" always helps improve selector performance because the selector engine doesn't have to do as many iterations when searching for elements.

Avoid using universal selectors

Performance will be greatly affected if a selector explicitly or implicitly matches within an undefined range.

Copy code The code is as follows:

$( ".buttons > *" ); / / Extremely expensive.
$( ".buttons" ).children(); // Much better.

$( ".category :radio" ); // Implied universal selection.
$ ( ".category *:radio" ); // Same thing, explicit now.
$( ".category input:radio" ); // Much better.
Use Stylesheets for Changing CSS on Many Elements

If you use the .css() method to change the CSS of more than 20 elements, you should consider adding a style tag to the page as an alternative. Doing so can increase the speed by nearly 60%.

Copy code The code is as follows:

// Fine for up to 20 elements, slow after that :
$( "a.swedberg" ).css( "color", "#0769ad" );

// Much faster:
$( "")
.appendTo( "head" );
Don't Treat jQuery as a Black Box

Treat the jQuery source code as a document. You can save it (http://bit.ly/jqsource) in your favorites and refer to it frequently.