Seven things you need to do to improve the performance of jQuery_jquery

Do seven things to help you improve the performance of jQuery. Do you want to know which ones?

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.

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

  var newListItem = "<li>" + item + "</li>";
 
 $( "#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.

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.

var myHtml = "";

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

  myHtml += "<li>" + item + "</li>";

});

$( "#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.

var myLength = myArray.length;

for ( var i = 0; i < myLength; 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.

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.

// 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.

// 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.

// 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

 $( ".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 generic selectors

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

$( ".buttons > *" ); // Extremely expensive.
$( ".buttons" ).children(); // Much better.
 
 $( ".category :radio" ); // Implied universal selection.
$( ".category *:radio" ); // Same thing, explicit now.
$( ".category input:radio" ); // Much better.
复制代码
6. 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%.

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

// Much faster:
$( "<style type=\"text/css\">a.swedberg { color: #0769ad }</style>")
  .appendTo( "head" );

7. Don't Treat jQuery as a Black Box

The above are the seven things you need to do to improve the performance of jQuery. It’s clear!