1. 儘量使用最新版本的jQuery類庫
jQuery項目中使用了大量的創新。最好的方法來提高性能就是使用最新版本的jQuery。每一個新的版本都包含了優化的bug修復。對我們來說唯一要乾的就是修改tag，何樂而不爲呢？
我們也可以使用免費的CDN服務，例如， Google來存放jQuery類庫。
2. 使用簡單的選擇器
直到最近，返回DOM元素的方式都是解析選擇器字符串，javascript循環和內建的javascript API例如，getElementbyId()，getElementsByTagName()，getElementsByClassName()三種方式的整合使用。但是現代瀏覽器都開始支持querySelectorAll()，這個方法能夠理解CSS查詢器，而且能帶來顯著的性能提升。
然而，我們應該避免使用複雜的選擇器返回元素。更不用說很多用戶使用老版本的瀏覽器，強迫jQuery去處理DOM樹。這個方式非常慢。
-
$('li[data-selected="true"] a') // Fancy, but slow $('li.selected a') // Better $('#elem') // Best
複製代碼
選擇id是最快速的方式。如果你需要使用class名稱， 那麼你最好帶上tag名稱，這樣會更快些。特別是在老瀏覽器和移動設備上。
訪問DOM是javascript應用最慢的方式
，因此儘量少使用。使用變量去保存選擇器，這樣會使用cache來保存。性能更好。
-
var buttons = $('#navigation a.button'); // Some prefer prefixing their jQuery variables with $:
-
var $buttons = $('#navigation a.button');
複製代碼
另外一個值得做的是jQuery給了你很多的額外便利選擇器 ，例如，:visible，:hidden，:animated還有其它，這些不是合法的CSS3選擇器。結果是你使用這些類庫就不能有效地利用
querySelectorAll()方法。爲了彌補這個問題，你需要先選擇元素，再過濾，如下：
-
$('a.button:animated'); // Does not use querySelectorAll()
-
$('a.button').filter(':animated'); // Uses it
複製代碼
3. 數組方式使用jQuery對象
運行選擇器的結果是一個jQuery對象。然而，jQuery類庫讓你感覺你正在使用一個定義了index和長度的數組。
-
// Selecting all the navigation buttons: var buttons = $('#navigation a.button');
-
// We can loop though the collection: for(var i=;i <buttons.length;i++){
-
console.log(buttons[i]); // A DOM element, not a jQuery object }
-
// We can even slice it: var firstFour = buttons.slice(, 4);
複製代碼
如果性能是你關注的，那麼使用簡單for或者while循環來處理，而不是$.each()，這樣能使你的代碼更快。
檢查長度也是一個檢查你的collection是否含有元素的方式。
-
if(buttons){ // This is always true
-
// Do something } if(buttons.length){
-
// True only if buttons contains elements // Do something }
複製代碼
4. 選擇器屬性
jQuery提供了一個屬性，這個屬性顯示了用來做鏈式的選擇器。
-
$('#container li:first-child').selector
-
// #container li:first-child
-
$('#container li').filter(':first-child').selector
-
// #container li.filter(:first-child)
複製代碼
雖然上面的例子針對同樣的元素，選擇器則完全不一樣。第二個實際上是非法的，你不可以使用它來創建一個對象。只能用來顯示filter方法是用來縮小collection。
5. 創建一個空的jQuery對象
創建一個新的jQuery空間能極大的減小開銷。有時候，你可能需要創建一個空的對象，然後使用add()方法添加對象。
-
var container = $([]);
-
container.add(another_element);
複製代碼
這也是quickEach方法的基礎，你可以使用這種更快的方式而非each()。
6. 選擇一個隨機元素
上面我提到過，jQuery添加它自己的選擇器過濾。除了類庫，你可以添加自己的過濾器。只需要添加一個新的方法到$.expr[':']對象。一個非常棒的使用方式是Waldek Mastykarz的博客中提到的：創建一個用來返回隨機元素的選擇器。你可以修改下面代碼：
-
(function($){
-
var random = ;
-
$.expr[':'].random = function(a, i, m, r) {
-
if (i == ) {
-
random = Math.floor(Math.random() * r.length);
-
} return i == random;
-
}; })(jQuery);
-
// This is how you use it:
-
$('li:random').addClass('glow');
複製代碼
7. 使用CSS Hooks
CSS hooks API是提供開發人員得到和設置特定的CSS數值的方法。使用它，你可以隱藏瀏覽器特定的執行並且使用一個統一的界面來存取特定的屬性。
-
$.cssHooks['borderRadius'] = {
-
get: function(elem, computed, extra){
-
// Depending on the browser, read the value of
-
// -moz-border-radius, -webkit-border-radius or border-radius
-
},
-
set: function(elem, value){
-
// Set the appropriate CSS3 property
-
} };
-
// Use it without worrying which property the browser actually understands:
-
$('#rect').css('borderRadius',5);
複製代碼
更好的在於，人們已經創建了一個支持CSS hooks類庫
8. 使用自定義的緩動方法
你可能聽到過jQuery的緩動插件，它能夠允許你給你的動畫添加特效。唯一的缺點是你的訪問者需要加載另外一個javascript文件。幸運的是，你可以簡單的從插件拷貝效果，並且添加到jQuery.easing對象中，如下：
-
$.easing.easeInOutQuad = function (x, t, b, c, d) {
-
if ((t/=d/2) < 1) return c/2*t*t + b;
-
return -c/2 * ((--t)*(t-2) - 1) + b; };
-
// To use it:
-
$('#elem').animate({width:200},'slow','easeInOutQuad');
複製代碼
9. $.proxy()
使用callback方法的缺點之一是當執行類庫中的方法後，context被設置到另外一個元素，例如：
-
"panel" style= "display:none"> Close
複製代碼
執行下面代碼：
-
$('#panel').fadeIn(function(){
-
// this points to #panel
-
$('#panel button').click(function(){
-
// this points to the button $(this).fadeOut();
-
});
-
});
複製代碼
你將遇到問題，button會消失，不是panel。使用$.proxy方法，你可以這樣書寫代碼：
-
$('#panel').fadeIn(function(){
-
// Using $.proxy to bind this:
-
$('#panel button').click($.proxy(function(){
-
// this points to #panel
-
$(this).fadeOut();
-
},this));
-
});
複製代碼
這樣才正確的執行。$.proxy方法接受兩個參數，你最初的方法，還有context。這裏閱讀更多$.proxy in the docs.。
10. 判斷頁面是否太過複雜
一個非常簡單的道理，約複雜的頁面，加載的速度越慢。你可以使用下面代碼檢查一下你的頁面內容：
-
console.log( $('*').length );
複製代碼
以上代碼返回的數值越小，網頁加載速度越快。你可以考慮通過刪除無用多餘的元素來優化你的代碼
11. 將你的代碼轉化成jQuery插件
如果你要花一定得時間去開發一段jQuery代碼，那麼你可以考慮將代碼變成插件。這將能夠幫助你重用代碼，並且能夠有效的幫助你組織代碼。創建一個插件代碼如下：
-
(function($){
-
$.fn.yourPluginName = function(){
-
// Your code goes here
-
return this;
-
};
-
})(jQuery);
複製代碼
你可以在這裏閱讀更多開發教程。
12. 設置全局AJAX爲缺省
如果你開發ajax程序的話，你肯定需要有”加載中“之類的顯示告知用戶，ajax正在進行，我們可以使用如下代碼統一管理，如下：
-
// ajaxSetup is useful for setting general defaults:
-
$.ajaxSetup({
-
url : '/ajax/', dataType : 'json' });
-
$.ajaxStart(function(){ showIndicator(); disableButtons(); });
-
$.ajaxComplete(function(){ hideIndicator(); enableButtons(); });
-
/* // Additional methods you can use: $.ajaxStop(); $.ajaxError(); $.ajaxSuccess(); $.ajaxSend(); */
複製代碼
13. 在動畫中使用delay()方法
鏈式的動畫效果是jQuery的強大之處。但是有一個忽略了的細節就是你可以在動畫之間加上delays，如下：
-
// This is wrong: $('#elem').animate({width:200},function(){
-
setTimeout(function(){
-
$('#elem').animate({marginTop:100});
-
},2000); });
-
// Do it like this:
-
$('#elem').animate({width:200}).delay(2000).animate({marginTop:100});
複製代碼
jQuery動畫幫了我們大忙，否則我們得自己處理一堆的細節，設置timtout，處理屬性值，跟蹤動畫變化等等。
14. 合理利用HTML5的Data屬性
HTML5的data屬性可以幫助我們插入數據。特別合適前後端的數據交換。jQuery近來發布的data()方法，可以有效的利用HTML5的屬性，來自動得到數據。下面是個例子：
-
d1" data-role= "page" data-last-value= "43" data-hidden= "true" data-options= '{"name":"John"}'>
複製代碼
爲了存取數據你需要調用如下代碼：
-
$("#d1").data("role");
-
// "page" $("#d1").data("lastValue");
-
// 43 $("#d1").data("hidden");
-
// true; $("#d1").data("options").name; // "John";
-
-
data()的jQuery文檔：data() in the jQuery docs
複製代碼
15. 本地存儲和jQuery
本地存儲是一個超級簡單的API。簡單的添加你的數據到localStorage全局屬性中:
-
// Check if "key" exists in the storage
-
var value = $.jStorage.get("key"); if(!value){
-
// if not - load the data from the server
-
value = load_data_from_server();
-
// and save it
-
$.jStorage.set("key",value); }
-
// Use value
複製代碼
但是對於老的瀏覽器來說，這個不是個好消息。因爲他們不支持。但是我們可以使用jQuery的插件來提供支持一旦本地存儲不能用的話。這種方式可以使得本地存儲功能正常工作。
|
