jQuery性能優化的28個建議 – Javascript教程_JS教程_技術文章 – 程式設計聯盟

我一直在尋找有關jQuery性能優化方面的小竅門,能讓我那臃腫的動態網頁應用變得輕便些。找瞭很多文章後,我決定將最好最常用的一些優化性能的建議列出來

一、選擇器性能優化建議

1. 總是從#id選擇器來繼承
這是jQuery選擇器的一條黃金法則。jQuery選擇一個元素最快的方法就是用ID來選擇瞭。

1 $('#content').hide();

或者從ID選擇器繼承來選擇多個元素:

1 $('#content
 p').hide();

2. 在class前面使用tag
jQuery中第二快的選擇器就是tag選擇器(如$(‘head’)),因為它和直接來自於原生的Javascript方法getElementByTagName()。所以最好總是用tag來修飾class(並且不要忘瞭就近的ID)

1 var

receiveNewsletter = $('#nslForm
 input.on');

jQuery中class選擇器是最慢的,因為在IE瀏覽器下它會遍歷所有的DOM節點。盡量避免使用class選擇器。也不要用tag來修飾ID。下面的例子會遍歷所有的p元素來查找id為’content’的那個節點:

1 var

content = $('p#content');
// 非常慢,不要使用

用ID來修飾ID也是畫蛇添足:

1 var

traffic_light = $('#content
 #traffic_light');
// 非常慢,不要使用

3. 使用子查詢
將父對象緩存起來以備將來的使用

1 var

header = $('#header');

2 var

menu = header.find('.menu');

3 // 或者

4 var

menu = $('.menu',
 header);

4. 優化選擇器以適用Sizzle的“從右至左”模型

自版本1.3之後,jQuery采用瞭Sizzle庫,與之前的版本在選擇器引擎上的表現形式有很大的不同。它用“從左至右”的模型代替瞭“從右至左”的模型。確保最右的選擇器具體些,而左邊的選擇器選擇范圍較寬泛些:

var linkContacts = $('.contact-links p.side-wrapper');

而不要使用

var linkContacts = $('a.contact-links .side-wrapper');

5. 采用find(),而不使用上下文查找

.find()函數的確快些。但是如果一個頁面有許多DOM節點時,需要來回查找時,可能需要更多時間:

1 var

ps = $('.testp',
'#pageBody');
// 2353 on Firebug 3.6

2 var

ps = $('#pageBody').find('.testp');
// 2324 on Firebug 3.6 – The best time

3 var

ps = $('#pageBody
 .testp');
// 2469 on Firebug 3.6

6. 利用強大的鏈式操作
采用jQuery的鏈式操作比緩存選擇器更有效:

1 $('li.menu-item').click(function

() {alert('test
 click');})

2                      .css('display',
'block')

3                      .css('color',
'red')

4                      fadeTo(2,
 0.7);

記住,永遠不要讓相同的選擇器在你的代碼裡出現多次:

(1)為瞭區分普通的JavaScript對象和jQuery對象,可以在變量首字母前加上$符號。

7. 編寫屬於你的選擇器

如果你經常在代碼中使用選擇器,那麼擴展jQuery的$.expr[':']對象吧,編寫你自己的選擇器。下面的例子中,我創建瞭一個abovethefold選擇器,用來選擇不可見的元素:

1 $.extend($.expr[':'],
 {

2 abovethefold:
function(el)
 {

3 return

$(el).offset().top < $(window).scrollTop() + $(window).height();

4 }

5 });

6 var

nonVisibleElements = $('p:abovethefold');
// 選擇元素

二、優化DOM操作建議

8. 緩存jQuery對象
將你經常用的元素緩存起來:

1 var

header = $('#header');

2 var

ps = header.find('p');

3 var

forms = header.find('form');

9. 當要進行DOM插入時,將所有元素封裝成一個元素
這裡的基本思想是在內存中建立你確實想要的東西,然後更新DOM。這並不是一個jQuery最佳實踐,但必須進行有效的JavaScript操作 。直接的DOM操作速度很慢

直接的DOM操作很慢。盡可能少的去更改HTML結構。

1 var

menu = '<ul
 id="menu">';

2 for

(var

i = 1; i < 100; i++) {

3 menu
 += '<li>'

+ i + '</li>';

4 }

5 menu
 += '</ul>';

6 $('#header').prepend(menu);

7 // 千萬不要這樣做:

8 $('#header').prepend('<ul
 id="menu"></ul>');

9 for

(var

i = 1; i < 100; i++) {

10 $('#menu').append('<li>'

+ i + '</li>');

11 }

冒泡事件:
除非在特殊情況下, 否則每一個js事件(例如:click, mouseover等.)都會冒泡到父級節點。當我們需要給多個元素調用同個函數時這點會很有用。代替這種效率很差的多元素事件監聽的方法就是, 你隻需向它們的父節點綁定一次。 比如, 我們要為一個擁有很多輸入框的表單綁定這樣的行為: 當輸入框被選中時為它添加一個class傳統的做法是,直接選中input,然後綁定focus等,如下所示:

1 $("#entryform
 input").bind("focus",
function(){

2     $(this).addClass("selected");

3 }).bind("blur",
function(){

4     $(this).removeClass("selected");

5 });

當然上面代碼能幫我們完成相應的任務,但如果你要尋求更高效的方法,請使用如下代碼:

1 $("#entryform").bind("focus",
function(e){

2     var

$cell = $(e.target); // e.target 捕捉到觸發的目標元素

3     $cell.addClass("selected");

4 }).bind("blur",
function(e){

5     var

$cell = $(e.target);

6     $cell.removeClass("selected");

7 });

通過在父級監聽獲取焦點和失去焦點的事件,對目標元素進行操作。在上面代碼中,父級元素扮演瞭一個調度員的角色, 它可以基於目標元素綁定事件。如果你發現你給很多元素綁定瞭同一個事件監聽, 那麼現在的你肯定知道哪裡做錯瞭。同理,在Table操作時,我們也可以使用這種方式加以改進代碼:普通的方式

1 $('#myTable
 td').click(function(){

2     $(this).css('background',
'red');

3 });

4  改進方式:

5 $('#myTable').click(function(e)
 {

6 var

$clicked = $(e.target);

7 $clicked.css('background',
'red');

8 });

假設有100個td,在使用普通的方式的時候,你綁定瞭100個事件。在改進方式中,你隻為一個元素綁定瞭1個事件,至於是100個事件的效率高,還是1個事件的效率高,相信你也能自行分辨瞭。

10. 盡管jQuery不會拋出異常,但開發者也應該檢查對象

盡管jQuery不會拋出大量的異常給用戶,但是開發者也不要依賴於此。jQuery通常會執行瞭一大堆沒用的函數之後才確定一個對象是否存在。所以在對一個作一系列引用之前,應先檢查一下這個對象存不存在。

11. 使用直接函數,而不要使用與與之等同的函數

為瞭獲得更好的性能,你應該使用直接函數如$.ajax(),而不要使用$.get(),$.getJSON(),$.post(),因為後面的幾個將會調用$.ajax()。

12. 緩存jQuery結果,以備後來使用

你經常會獲得一個javasript應用對象——你可以用App.來保存你經常選擇的對象,以備將來使用:

1 App.hiddenDivs
 = $('p.hidden');

2 // 之後在你的應用中調用:

3 App.hiddenDivs.find('span');

13. 采用jQuery的內部函數data()來存儲狀態

不要忘瞭采用.data()函數來存儲信息:

1 $('#head').data('name',
'value');

2 // 之後在你的應用中調用:

3 $('#head').data('name');

14. 使用jQuery utility函數

不要忘瞭簡單實用的jQuery的utility函數。我最喜歡的是$.isFunction(), $isArray()和$.each()。

15. 為HTML塊添加“JS”的class

當jQuery載入之後,首先給HTML添加一個叫”JS”的class

$('HTML').addClass('JS');

隻有當用戶啟用JavaScript的時候,你才能添加CSS樣式。例如

/* 在css中 */

.JS #myDiv{display:none;}

所以當JavaScript啟用的時候,你可以將整個HTML內容隱藏起來,用jQuery來實現你想實現的(譬如:收起某些面板或當用戶點擊它們時展開)。而當Javascript沒有啟用的時候,瀏覽器呈現所有的內容,搜索引擎爬蟲也會勾去所有內容。我將來會更多的使用這個技巧。

閱讀更多相關內容

三、關於優化事件性能的建議

16. 推遲到$(window).load

有時候采用$(window).load()比$(document).ready()更快,因為後者不等所有的DOM元素都下載完之前執行。你應該在使用它之前測試它。

17. 使用Event Delegation

當你在一個容器中有許多節點,你想對所有的節點都綁定一個事件,delegation很適合這樣的應用場景。使用Delegation,我們僅需要在父級綁定事件,然後查看哪個子節點(目標節點)觸發瞭事件。當你有一個很多數據的table的時候,你想對td節點設置事件,這就變得很方便。先獲得 table,然後為所有的td節點設置delegation事件:

1 $("table").delegate("td",
"hover",
function(){

2 $(this).toggleClass("hover");

3 });

使用ready事件的簡寫

如果你想壓縮js插件,節約每一個字節,你應該避免使用$(document).onready()

1 /
 也不要使用

2 $(document).ready(function

(){

3 // 代碼

4 });

5 // 你可以如此簡寫:

6 $(function

(){

7 // 代碼

8 });

四、測試jQuery

19. jQuery單元測試

測試JavaSript代碼最好的方法就是人來測試。但你可以使用一些自動化的工具如Selenium,Funcunit,QUit,QMock來測試你的代碼(尤其是插件)。我想在另外一個專題來討論這個話題因為實在有太多要說的瞭。

20. 標準化你的jQuery代碼

經常標準化你的代碼,看看哪個查詢比較慢,然後替換它。你可以用Firebug控制臺。你也可以使用jQuery的快捷函數來使測試變得更容易些:

1 // 在Firebug控制臺記錄數據的快捷方式

2 $.l($('p'));

3 // 獲取UNIX時間戳

4 $.time();

5 // 在Firebug記錄執行代碼時間

6 $.lt();

7 $('p');

8 $.lt();

9 // 將代碼塊放在一個for循環中測試執行時間

10 $.bm("var
 ps = $('.testp', '#pageBody');");
// 2353 on Firebug 3.6

五、其他常用jQuery性能優化建議

21. 使用最新版本的jQuery

最新的版本往往是最好的。更換瞭版本後,不要忘記測試你的代碼。有時候也不是完全向後兼容的。

22. 使用HMTL5

新的HTML5標準帶來的是更輕巧的DOM結構。更輕巧的結構意味著使用jQuery需要更少的遍歷,以及更優良的載入性能。所以如果可能的話請使用HTML5。

23. 如果給15個以上的元素加樣式時,直接給DOM元素添加style標簽

要給少數的元素加樣式,最好的方法就是使用jQuey的css()函數。然而更15個以上的較多的元素添加樣式時,直接給DOM添加style 標簽更有效些。這個方法可以避免在代碼中使用硬編碼(hard code)。

1 $('<style
 type="text/css"> p.class { color: red; } </style>')

2 .appendTo('head');

24. 避免載入多餘的代碼

將Javascript代碼放在不同的文件中是個好的方法,僅在需要的時候載入它們。這樣你不會載入不必要的代碼和選擇器。也便於管理代碼。

25. 壓縮成一個主JS文件,將下載次數保持到最少

當你已經確定瞭哪些文件是應該被載入的,那麼將它們打包成一個文件。用一些開源的工具可以自動幫你完成,如使用Minify(和你的後端代碼集成)或者使用JSCompressor,YUI Compressor 或 Dean Edwards JS packer等在線工具可以為你壓縮文件。我最喜歡的是JSCompressor。

26. 需要的時候使用原生的Javasript

使用jQuery是個很棒的事情,但是不要忘瞭它也是Javascript的一個框架。所以你可以在jQuery代碼有必要的時候也使用原生的Javascript函數,這樣能獲得更好的性能。

27. 從Google載入jQuery框架

當你的應用正式上線的時候,請從Google CDN載入jQuery,因為用戶可以從最近的地方獲取代碼。這樣你可以減少服務器請求,而用戶如果瀏覽其他網站,而它也使用Google CDN的jQuery時,瀏覽器就會立即從緩存中調出jQuery代碼。

1 // 鏈接特定版本的壓縮代碼

2 <script
 type="text/javascript"

src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>

28. 緩慢載入內容不僅能提高載入速度,也能提高SEO優化 (Lazy load content for speed and SEO benefits)

使用Ajax來載入你的網站吧,這樣可以節約服務器端載入時間。你可以從一個常見的側邊欄widget開始。

ps:加亮標題是個人比較認為高效使用的技巧

摘自 PHP淮北@PHP10086博客網

發佈留言