jQuery 做好七件事帮你提升jQuery的性能

浏览数：11 / 时间：2015年06月09日

1. Append Outside of Loops

凡是触及到DOM都是有代价的。如果你向DOM当中附加大量的元素，你会想一次性将它们全部附加进来，而不是分多次进行。当在循环当中附加元素就会产生一个常见的问题。

1 $.each( myArray, function( i, item ) {
2 
3     var newListItem = "<li>" + item + "</li>";
4 
5     $( "#ballers" ).append( newListItem );
6 
7 });

一个常用的技巧是利用文档片段（document fragment）。在循环的每一次迭代当中，将元素附加到片段而不是DOM元素当中。当循环结束后，将片段附加到DOM元素当中即可。

 1 var frag = document.createDocumentFragment();
 2 
 3 $.each( myArray, function( i, item ) {
 4 
 5     var newListItem = document.createElement( "li" );
 6     var itemText = document.createTextNode( item );
 7 
 8     newListItem.appendChild( itemText );
 9 
10     frag.appendChild( newListItem );
11 
12 });
13 
14 $( "#ballers" )[ 0 ].appendChild( frag );

另一个简单的技巧是在循环的每次迭代当中，持续构建一个字符串。当循环结束后，将DOM元素的HTML设置成该字符串。

1 var myHtml = "";
2 
3 $.each( myArray, function( i, item ) {
4 
5     myHtml += "<li>" + item + "</li>";
6 
7 });
8 
9 $( "#ballers" ).html( myHtml );

当然还有其它一些技巧可以供你尝试。一个名为 jsperf 的站点为测试这些性能提供了一条好的出路。该网站允许你使用基准测试每一个技巧，并将其跨平台的性能测试结果可视化的展现出来。

2. Cache Length During Loops

在for循环当中，不要每次都访问数组的 length 属性；应当事先将其缓存起来。

1 var myLength = myArray.length;
2 
3 for ( var i = 0; i < myLength; i++ ) {
4 
5     // do stuff
6 
7 }

3. Detach Elements to Work with Them

操作DOM是缓慢的，因此你想尽可能减少对齐进行操作。jQuery在1.4版本当中引入了名为 detach() 的方法来帮助解决这一问题，它允许你在对元素进行操作时，将它们从DOM当中分离出来。

1 var $table = $( "#myTable" );
2 var $parent = $table.parent();
3 
4 $table.detach();
5 
6 // ... add lots and lots of rows to table
7 
8 $parent.append( $table );

4. Don’t Act on Absent Elements

如果你正打算在一个空的选择器上运行大量的代码，jQuery并不会给予任何的提示 -- 它将会继续的执行，就像是没有发生任何的错误。必须由你来验证选择器包含了多少元素。

 1 // Bad: This runs three functions before it
 2 // realizes there‘s nothing in the selection
 3 $( "#nosuchthing" ).slideUp();
 4 
 5 // Better:
 6 var $mySelection = $( "#nosuchthing" );
 7 
 8 if ( $mySelection.length ) {
 9 
10     $mySelection.slideUp();
11 
12 }
13 
14 // Best: Add a doOnce plugin.
15 jQuery.fn.doOnce = function( func ) {
16 
17     this.length && func.apply( this );
18 
19     return this;
20 
21 }
22 
23 $( "li.cartitems" ).doOnce(function() {?
24 
25     // make it ajax! \o/?
26 
27 });

本指南特别适用于那些当选择器不包含元素时还需要大量的开销的 jQuery UI 部件。

5. Optimize Selectors

选择器的优化和过去比起来并不是那么的重要，因为很多浏览器都实现了 document.querySelectorAll() 方法并且jQuery将选择器的负担转移到了浏览器上面。但是仍然有一些技巧需要铭记在心。

基于ID的选择器

以一个ID作为选择器的开始总是最好的。

1 // Fast:
2 $( "#container div.robotarm" );
3 
4 // Super-fast:
5 $( "#container" ).find( "div.robotarm" );

采用 .find() 方法的方式将更加的快速，因为第一个选择器已经过处理，而无需通过嘈杂的选择器引擎 -- ID-Only的选择器已使用 document.getElementById() 方法进行处理，之所以快速，是因为它是浏览器的原生方法。

特异性

尽量详细的描述选择器的右侧，对于左侧则应反其道而行之。

1 // Unoptimized:
2 $( "div.data .gonzalez" );
3 
4 // Optimized:
5 $( ".data td.gonzalez" );

尽量在选择器的最右侧使用 tag.class 的形式来描述选择器，而在左侧则尽量只使用 tag 或者 .class 。

避免过度使用特异性

1 $( ".data table.attendees td.gonzalez" );
2 
3 // Better: Drop the middle if possible.
4 $( ".data td.gonzalez" );

去讨好“DOM”总是有利于提升选择器的性能，因为选择器引擎在搜寻元素时无需进行太多的遍历。

避免使用通用选择器

如果一个选择器明确或暗示它能在不确定的范围内进行匹配将会大大影响性能。

1 $( ".buttons > *" ); // Extremely expensive.
2 $( ".buttons" ).children(); // Much better.
3 
4 $( ".category :radio" ); // Implied universal selection.
5 $( ".category *:radio" ); // Same thing, explicit now.
6 $( ".category input:radio" ); // Much better.

6. Use Stylesheets for Changing CSS on Many Elements

假如你使用 .css() 方法来改变超过20个元素的CSS，应当考虑为页面添加一个样式标签作为替代，这样做可以提升将近60%的速度。

1 // Fine for up to 20 elements, slow after that:
2 $( "a.swedberg" ).css( "color", "#0769ad" );
3 
4 // Much faster:
5 $( "<style type=\"text/css\">a.swedberg { color: #0769ad }</style>")
6     .appendTo( "head" );