jQuery性能優化28條建議你值得借鑒
2024-05-06 14:19:35
供稿：網友
jQuery性能優化28條建議 一直在尋找有關jQuery性能優化方面的小竅門，能讓我那臃腫的動態網頁應用變得輕便些。找了很多文章后，我決定將最好最常用的一些優化性能的建議列出來。我也做了一個jQuery性能優化的簡明樣式表，你可以打印出來或者設為桌面背景。
一、選擇器性能優化建議
1. 總是從#id選擇器來繼承
這是jQuery選擇器的一條黃金法則。jQuery選擇一個元素最快的方法就是用ID來選擇了。
代碼如下:
$('#content').hide();
或者從ID選擇器繼承來選擇多個元素:
代碼如下:
$('#content p').hide();
2. 在class前面使用tag
jQuery中第二快的選擇器就是tag選擇器（如$(‘head')），因為它和直接來自于原生的Javascript方法getElementByTagName()。所以最好總是用tag來修飾class(并且不要忘了就近的ID)
代碼如下:
var receiveNewsletter = $('#nslForm input.on');
jQuery中class選擇器是最慢的，因為在IE瀏覽器下它會遍歷所有的DOM節點。盡量避免使用class選擇器。也不要用tag來修飾ID。下面的例子會遍歷所有的div元素來查找id為'content'的那個節點：
代碼如下:
var content = $('div#content'); // 非常慢，不要使用
用ID來修飾ID也是畫蛇添足：
代碼如下:
var traffic_light = $('#content #traffic_light'); // 非常慢，不要使用
3. 使用子查詢
將父對象緩存起來以備將來的使用
代碼如下:
var header = $('#header');
var menu = header.find('.menu');
// 或者
var menu = $('.menu', header);
4. 優化選擇器以適用Sizzle的“從右至左”模型
自版本1.3之后，jQuery采用了Sizzle庫，與之前的版本在選擇器引擎上的表現形式有很大的不同。它用“從左至右”的模型代替了“從右至左”的模型。確保最右的選擇器具體些，而左邊的選擇器選擇范圍較寬泛些：
代碼如下:
var linkContacts = $('.contact-links div.side-wrapper');
而不要使用
代碼如下:
var linkContacts = $('a.contact-links .side-wrapper');
5. 采用find()，而不使用上下文查找
.find()函數的確快些。但是如果一個頁面有許多DOM節點時，需要來回查找時，可能需要更多時間:
代碼如下:
var divs = $('.testdiv', '#pageBody'); // 2353 on Firebug 3.6
var divs = $('#pageBody').find('.testdiv'); // 2324 on Firebug 3.6 - The best time
var divs = $('#pageBody .testdiv'); // 2469 on Firebug 3.6
6. 利用強大的鏈式操作
采用jQuery的鏈式操作比緩存選擇器更有效：
代碼如下:
$('li.menu-item').click(function () {alert('test click');})
.css('display', 'block')
.css('color', 'red')
fadeTo(2, 0.7);
7. 編寫屬于你的選擇器
如果你經常在代碼中使用選擇器，那么擴展jQuery的$.expr[':']對象吧，編寫你自己的選擇器。下面的例子中，我創建了一個abovethefold選擇器，用來選擇不可見的元素：
