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.不要对空节点进行操作
如果你对空对象操作时,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() {
// ...
});