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

1. Append Outside of Loops

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

代码如下:
$.each( myArray, function( i, item ) {
    var newListItem = "<li>" + item + "</li>";
    $( "#ballers" ).append( newListItem );
});

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

代码如下:
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 );

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

代码如下:
var myHtml = "";

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

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

});

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

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

2. Cache Length During Loops

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

代码如下:
var myLength = myArray.length;

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

    // do stuff

}

3. Detach Elements to Work with Them

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

代码如下:
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

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

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

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

if ( $mySelection.length ) {