做好七件事幫你提升jQuery的性能
1. Append Outside of Loops
凡是觸及到DOM都是有代價的。如果你向DOM當中附加大量的元素，你會想一次性將它們?nèi)扛郊舆M來，而不是分多次進行。當在循環(huán)當中附加元素就會產(chǎn)生一個常見的問題。
$.each( myArray, function( i, item ) {
var newListItem = "<li>" + item + "</li>";
$( "#ballers" ).append( newListItem );
});
一個常用的技巧是利用文檔片段（document fragment）。在循環(huán)的每一次迭代當中，將元素附加到片段而不是DOM元素當中。當循環(huán)結(jié)束后，將片段附加到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 );
另一個簡單的技巧是在循環(huán)的每次迭代當中，持續(xù)構(gòu)建一個字符串。當循環(huán)結(jié)束后，將DOM元素的HTML設(shè)置成該字符串。
var myHtml = "";
$.each( myArray, function( i, item ) {
myHtml += "<li>" + item + "</li>";
});
$( "#ballers" ).html( myHtml );
當然還有其它一些技巧可以供你嘗試。一個名為 jsperf 的站點為測試這些性能提供了一條好的出路。該網(wǎng)站允許你使用基準測試每一個技巧，并將其跨平臺的性能測試結(jié)果可視化的展現(xiàn)出來。
2. Cache Length During Loops
在for循環(huán)當中，不要每次都訪問數(shù)組的 length 屬性；應(yīng)當事先將其緩存起來。
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并不會給予任何的提示 -- 它將會繼續(xù)的執(zhí)行，就像是沒有發(fā)生任何的錯誤。必須由你來驗證選擇器包含了多少元素。
// Bad: This runs three functions before it
// realizes there's nothing in the selection
$( "#nosuchthing" ).slideUp();
// Better:
var $mySelection = $( "#nosuchthing" );
if ( $mySelection.length ) {
$mySelection.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/
});
本指南特別適用于那些當選擇器不包含元素時還需要大量的開銷的 jQuery UI 部件。
5. Optimize Selectors
選擇器的優(yōu)化和過去比起來并不是那么的重要，因為很多瀏覽器都實現(xiàn)了 document.querySelectorAll() 方法并且jQuery將選擇器的負擔轉(zhuǎn)移到了瀏覽器上面。但是仍然有一些技巧需要銘記在心。
基于ID的選擇器
以一個ID作為選擇器的開始總是最好的。
// Fast:
$( "#container div.robotarm" );
// Super-fast:
$( "#container" ).find( "div.robotarm" );
采用 .find() 方法的方式將更加的快速，因為第一個選擇器已經(jīng)過處理，而無需通過嘈雜的選擇器引擎 -- ID-Only的選擇器已使用 document.getElementById() 方法進行處理，之所以快速，是因為它是瀏覽器的原生方法。
特異性
盡量詳細的描述選擇器的右側(cè)，對于左側(cè)則應(yīng)反其道而行之。
// Unoptimized:
$( "div.data .gonzalez" );
// Optimized:
$( ".data td.gonzalez" );
盡量在選擇器的最右側(cè)使用 tag.class 的形式來描述選擇器，而在左側(cè)則盡量只使用 tag 或者 .class 。
避免過度使用特異性
$( ".data table.attendees td.gonzalez" );
// Better: Drop the middle if possible.
$( ".data td.gonzalez" );
去討好“DOM”總是有利于提升選擇器的性能，因為選擇器引擎在搜尋元素時無需進行太多的遍歷。
避免使用通用選擇器
如果一個選擇器明確或暗示它能在不確定的范圍內(nèi)進行匹配將會大大影響性能。
$( ".buttons > *" ); // Extremely expensive.
$( ".buttons" ).children(); // Much better.
$( ".category :radio" ); // Implied universal selection.
$( ".category *:radio" ); // Same thing, explicit now.
$( ".category input:radio" ); // Much better.
Use Stylesheets for Changing CSS on Many Elements
假如你使用 .css() 方法來改變超過20個元素的CSS，應(yīng)當考慮為頁面添加一個樣式標簽作為替代，這樣做可以提升將近60%的速度。
// 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" );
Don't Treat jQuery as a Black Box
把jQuery的源碼當成文檔，可以把它（http://bit.ly/jqsource）保存在你的收藏夾內(nèi)，經(jīng)常的查閱參考。
相關(guān)文章
這篇文章主要介紹了jQuery內(nèi)容過濾選擇器用法,實例分析了:contains()、:has()、:empty()、:parent等內(nèi)容過濾選擇器的使用技巧,需要的朋友可以參考下2015-02-02
CSS偽元素不是DOM元素，因此你無法直接選擇到它們。下面與大家分享兩種不錯的修改方法，需要的朋友可以參考下2014-07-07
這篇文章主要介紹了jQuery簡單實現(xiàn)列表隱藏和顯示效果,結(jié)合實例形式分析了jQuery中slideToggle動態(tài)操作頁面元素切換的相關(guān)技巧,需要的朋友可以參考下2016-09-09
jquery快捷動態(tài)綁定鍵盤事件的操作函數(shù)代碼
