幫你提升jQuery的效能 的七件事

幫你提升jQuery的效能 的七件事

 這篇文章主要介紹了做好七件事幫你提升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 ) {

 

    $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

 

選取器的最佳化和過去比起來並不是那麼的重要，因為很多瀏覽器都實現了 document.querySelectorAll() 方法並且jQuery將選取器的負擔轉移到了瀏覽器上面。但是仍然有一些技巧需要銘記在心。

 

基於ID的選取器

 

以一個ID作為選取器的開始總是最好的。

 

 代碼如下:

 // Fast:

 $( "#container div.robotarm" );

 

 // Super-fast:

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

 

 

採用 .find() 方法的方式將更加的快速，因為第一個選取器已經過處理，而無需通過嘈雜的選取器引擎 -- ID-Only的選取器已使用 document.getElementById() 方法進行處理，之所以快速，是因為它是瀏覽器的原生方法。

 

特異性

 

盡量詳細的描述選取器的右側，對於左側則應反其道而行之。

 

 代碼如下:

 // Unoptimized:

 $( "div.data .gonzalez" );

 

 // Optimized:

 $( ".data td.gonzalez" );

 

 

盡量在選取器的最右側使用 tag.class 的形式來描述選取器，而在左側則盡量只使用 tag 或者 .class 。

 

避免過度使用特異性

 

 代碼如下:

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

 

 // Better: Drop the middle if possible.

 $( ".data td.gonzalez" );

 

 

去討好“DOM”總是有利於提升選取器的效能，因為選取器引擎在搜尋元素時無需進行太多的遍曆。

 

避免使用通用選取器

 

如果一個選取器明確或暗示它能在不確定的範圍內進行匹配將會大大影響效能。

 

代碼如下:

 $( ".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，應當考慮為頁面添加一個樣式標籤作為替代，這樣做可以提升將近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）儲存在你的收藏夾內，經常的查閱參考