如何提升JQuery性能，JQuery社区给出的六个意见

 

　原文来自JQuery社区。翻译完后发现有很多人早就翻了，但还是发上来，因为确实蛮有用的。

在循环外操作DOM：　　

　操作DOM的花费是很大的，如果要在DOM中添加很多元素，那么应该一次性的添加到其中而不是添加很多次。如下的代码是经常出现问题。

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

var newListItem = "<li>" + item + "</li>";

$( "#ballers" ).append( newListItem );

});

　一个常用的解决这种问题的手段是利用DocumentFragment，每次向对它进行操作，最后再将其加入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 );

　另外一个手段是借助String。

var myHtml = "";

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

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

});

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

---

将对长度的计算放到循环开始前：

　像这样：

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

---

如果对一个DOM涉及到很多操作，那么使用De：

　ps:Detach的实现功能与remove相同，区别是它会保留相关JQuery对象的数据。
　对DOM的操作速度是很慢的，如果涉及到对同一个DOM进行大量操作，那么我们应该使用Detach，操作完成予以还原。

var table = $( "#myTable" );
var parent = table.parent();
 
table.detach();
 
// ... add lots and lots of rows to table
 
parent.append( table );

---

不要对不存在的元素进行操作：

　在选择器选择到的元素是空的时候，JQuery是不会给出提示的，后面进行的相关DOM操作仍然会进行，所以，在必要的时候，判断选择器是不是返回了空。这项实践原则对于JQuery UI 尤为重要

// Bad: This runs three functions before it
// realizes there's nothing in the selection
$( "#nosuchthing" ).slideUp();
 
// Better:
var elem = $( "#nosuchthing" );
 
if ( elem.length ) {
 
    elem.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/

 
});

---

优化选择器：

　尽量使用ID作为选择器。

// Fast:
$( "#container div.robotarm" );
 
// Super-fast:
$( "#container" ).find( "div.robotarm" );

　　后者之所以比前者还快是因为Jquery调用了浏览器原生支持的getElementById。

　　

　　将定义更精确的限制符放在后面

// Unoptimized:
$( "div.data .gonzalez" );
 
// Optimized:
$( ".data td.gonzalez" );

　　

　　选择器的限制符不要过于精确，这样是很耗资源的

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

　　

　　避免使用全局选择器

　　

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

---

设置样式时，如果元素很多，使用样式表而不是css方法：

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

---

不要将JQuery视作黑盒子：

　　将源代码当作文档。