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.
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.
$.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.
$.each( myArray, function( i, item ) {
myHtml = "
});
$( "#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.
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.
$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.
// 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.
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.
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
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.
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%.
Treat the jQuery source code as a document. You can save it (http://bit.ly/jqsource) in your favorites and refer to it frequently.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
