Jaosn的部落格

這裡總結了幾篇博文的內容，方便日後查閱。

1.總是從ID選擇器開始繼承

JQuery中最快的篩選器是ID篩選器($(『#someid'))。這是因為它直接和JavaScript的getElementById()方法對應。

2. 在class前使用tag

第二快的選擇器是tag選擇器($(『head')). 因為它和JavaScript的getElementsByTagName() 方法對應。例如：$(『div.someclass')。

綜合第一點和第二點:

如果需要$(『.someclass')，應該使用$(『#someid > tag.someclass')來縮小DOM Tree的搜索範圍
#someid 前面不要用tag來修飾。寫成$(『div#someid')會降低性能，因為JS會遍歷所有的div元素來查找id為』someid'的哪一個節點:
#someid也不需要由#otherid來修飾。寫成$(『#otherid #someid')也會降低性能。

3.緩存JQuery對象

要養成將jquery對象緩存進變量的習慣。

永遠不要這樣做：

$(『#traffic_light input.on').bind(『click', function(){…});
$(『#traffic_light input.on').css(『border', 』3px dashed yellow');
$(『#traffic_light input.on').css(『background-color', 『orange');
$(『#traffic_light input.on').fadeIn(『slow');

最好先將對象緩存進一個變量然後再操作:

var $active_light = $(『#traffic_light input.on');
$active_light.bind(『click', function(){…});
$active_light.css(『border', 』3px dashed yellow');
$active_light.css(『background-color', 『orange');
$active_light.fadeIn(『slow');

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

4.用for替代each

原生函數總是比輔助組件更快。

5. 合理使用鏈式操作

可以減少對DOM Tree的訪問以及代碼量。

6.使用子查詢

使用children(), find(), filter()來進行子查詢。

7.對直接的DOM操作進行限制

儘量減少對DOM Tree的直接操作。

幾種可用的方法：

1. 先將元素從document中刪除，完成修改後再把元素放回原來的位置
2. 將元素的display設置為」none」，完成修改後再把display修改為原來的值
3. 在插入之前將多個元素包裹進一個單獨的父級節點會更快
4. 儘可能少的修改元素style上的屬性
5. 儘量通過修改className來修改樣式

8. 事件冒泡的利用

除非在特殊情況下, 否則每一個js事件(例如:click, mouseover, 等.)都會冒泡到父級節點. 當我們需要給多個元素調用同個函數時這點會很有用。

代替這種效率很差的多元素事件監聽的方法就是, 你只需向它們的父節點綁定一次, 並且可以計算出哪個節點觸發了事件。

例如, 我們要為一個擁有很多輸入框的表單綁定這樣的行為: 當輸入框被選中時為它添加一個class。

像這樣綁定事件是低效的:

$(『#entryform input).bind(『focus', function(){
$(this).addClass(『selected');
}).bind(『blur', function(){
$(this).removeClass(『selected');
});

我們需要在父級監聽獲取焦點和失去焦點的事件:

$(『#entryform).bind(『focus', function(e){
var cell = $(e.target); // e.target 保存事件的觸發者
cell.addClass(『selected');
}).bind(『blur', function(e){
var cell = $(e.target);
cell.removeClass(『selected');
});

父級元素扮演了一個調度員的角色, 它可以基於目標元素綁定事件. 如果你發現你給很多元素綁定了同一個事件監聽, 那麼你肯定哪裡做錯了。

9. 將某些函數推遲到 $(window).load執行

儘管$(document).ready確實很有用, 它可以在頁面渲染時,其它元素還沒下載完成就執行. 如果你發現你的頁面一直是載入中的狀態, 很有可能就是$(document).ready函數引起的.

你可以通過將jquery函數綁定到$(window).load 事件的方法來減少頁面載入時的cpu使用率. 它會在所有的html(包括<iframe>)被下載完成後執行.

10. 合併、最小化腳本

腳本都是排隊一一加載的，所以要儘量減少JS文件的個數，以及利用壓縮工具壓縮JS文件。

原文地址：http://www.fancycedar.info/2010/02/jquery-tuning/