jquery官方性能优化建议

jquery的官网上给出了6点性能方面的建议：

（1）在循环外面做append操作

DOM操作是有成本的，一次性append要比循环中每次都append要好很多

下面这种操作方式是一种普遍的现象，在循环中每次都执行append

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

建议创建一个fragment，在循环中 把内容append到fragment，最后把这个fragment append到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 );

或者在循环中构造字符串，最后把字符串设置到节点中

（2）循环时缓存length

循环中，不要每次都访问length熟悉，应在循环开始前把length值缓存起来

var myLength = myArray.length; 
for ( var i = 0; i < myLength; i++ ) { 
    // ... 
}

（3）操作子节点时 先把子节点Detach出来

DOM操作较慢，应尽量避免大量操作，如果想对某节点内部做一些操作，应先把子节点都移出来，对这些子节点操作完成后再放回去

var table = $( "#myTable" );
var parent = table.parent();
table.detach();
// 执行对table的各种操作
parent.append( table );

（4）不要对空节点进行操作

如果你对空对象操作时，jquery是不会告诉你的，因为对空操作时开销也不小，所以应该自己验证一下是否为空，以免做很多无效操作

// 糟糕的方式
$( "#nosuchthing" ).slideUp();
// 好的方式
var elem = $( "#nosuchthing" );
if ( elem.length ) {
    elem.slideUp();
}
// 更好的方式
jQuery.fn.doOnce = function( func ) { 
    this.length && func.apply( this ); 
    return this; 
} 
$( "li.cartitems" ).doOnce(function() { 
    // ...
});

（5）选择器优化

1）使用ID选择器

选择器以ID开始总是最好的

// 快

$( "#container div.robotarm" );

// 更快

$( "#container" ).find( "div.robotarm" );

第二种方式更快是因为使用了浏览器原生支持的document.getElementById()

2）右边尽量指定得详细点 而左边则尽量简单点

// 不好

$( "div.data .gonzalez" );

// 好

$( ".data td.gonzalez" );

因为选择器是从右面开始查找的，所以右面越明确，查找越快

3）避免冗余

// 不好

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

// 好

$( ".data td.gonzalez" );

4）避免通用选择器

通用选择器在任何地方出现都会很慢

$( ".buttons > *" ); // 及其慢的

$( ".buttons" ).children(); // 优化的

$( ".category :radio" ); // 隐式通用选择器，没明确指定*，但实际还是会使用

$( ".category *:radio" ); // 显示通用选择器

$( ".category input:radio" ); // 优化的

（6）修改多个节点的css时，使用样式表

如果你正在使用css()对20个以上节点修改css，使用style标签来代替，会提速将近60%

// 对20个以上的节点进行CSS操作，这样比较慢

$( "a.swedberg" ).css( "color", "#0769ad" );

// 这样会快很多

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

.appendTo( "head" );