一、注意定義jQuery變數的時候加入var關鍵字
這個不只是jQuery，所有javascript開發過程中，都需要注意，請不要定義成如下：
$loading = $('#loading'); //這個是全域定義，不知道哪裡位置倒楣引用了相同的變數名，就會鬱悶至死的
二、請使用一個var來定義變數
如果你使用多個變數的話，請如下定義：
var page = 0,
$loading = $('#loading'),
$body = $('body');
不要增加每個變數一個var關鍵字，除非你有嚴重的強迫症
三、定義jQuery變數是添加$符號申明或定義變數的時候，請記住如果你定義的是jQuery的變量，請加$符號到變數前，如下：
var $ loading = $('#loading');
這裡定義成這樣的好處在於，你可以有效的提示自己或其它閱讀你程式碼的用戶，這是一個jQuery的變數。
四、DOM操作請務必記住快取（cache）在jQuery程式碼開發中，我們常常需要操作DOM，DOM操作是非常消耗資源的過程，而往往很多人都喜歡這樣使用jQuery：
$('#loading' ).html('完畢');
$('#loading').fadeOut();
程式碼沒有任何問題，你也可以正常運行出結果，但是這裡注意你每次定義而且呼叫$('#loading')的時候，都實際創建了一個新的變量，如果你需要重用的話，記住一定要定義到一個變量裡，這樣可以有效的緩存變量內容，如下：
var $loading = $('#loading');
$loading. html('完畢');$loading.fadeOut();
這樣效能會更好。
五、使用鍊式操作
上面那個例子，我們可以寫的更簡潔一些：
複製程式碼
程式碼如下:
var $loading = $('#loading');
$loading.html('完畢').fadeOut();
複製代碼
代碼如下:
// ！ ！反面人物
$button.click(function(){
$target.css('width','50%');
$target.css('border','1px solid #20202020202020 );
$target.css('color','#fff');
複製程式碼
程式碼如下:
$button.click(function(){
$target.css({'width':'50%','border ':'1px solid #202020','color':'#fff'});
});七、避免使用全域類型的選擇器
請勿以下列方式書寫：$('.something > *');這樣書寫比較好：$('.something').children();
八、不要疊加多個ID
請勿如下書寫：$('#something #children');這樣就夠了：$('#children');
複製程式碼
代碼如下:
if(!$something) {
$something = $('#something ');
}
程式碼如下:$something= $something|| $('#something');
十、盡量使用更少的程式碼與其這樣書寫：if(string.length > 0){..}
不如這樣書寫：if(string.length){ ..}
十一、盡量使用.on方法如果你使用比較新版本的jQuery類庫的話，請使用.on，其它任何方法都是最終使用.on來實現的。
十二、盡量使用最新版本的jQuery
最新版本的jQuery擁有更好的性能，但是最新的版本可能不支援ie6/7/8，所以大家需要自己針對實際情況選擇。
十三、盡量使用原生的Javascript
如果使用原生的Javascript也可以實作jQuery提供的功能的話，建議使用原生的javascript來實現。
十四、總是從#id選擇器來繼承這是jQuery選擇器的一條黃金法則。 jQuery選擇一個元素最快的方法就是用ID來選擇了。
$('#content').h();
$('#content').h>
或從ID選擇器繼承來選擇多個元素:
程式碼如下:
$('#content p').hide();
十五、在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'); // 非常慢，不要用
十六、使用子查詢
將父物件快取起來以備將來的使用
程式碼如下:
var header = $('#header');
var header = $('#header');
var menu = header.find('.menu');
// 或
var menu = $('.menu', header);十七、 最佳化選擇器以適用Sizzle的「從右到左」模型
自版本1.3之後，jQuery採用了Sizzle庫，與之前的版本在選擇器引擎上的表現形式有很大的不同。它用“從左到右”的模型代替了“從右至左”的模型。確保最右邊的選擇器具體些，而左邊的選擇器選擇範圍較寬泛些：複製代碼
代碼如下:
var linkContacts = $('.contact-links div.side-wrapper');
代碼如下:
var linkContacts = $('a.contact-links .side-wrapper');
十八、 採用find( )，而不使用上下文來找出
.find()函數的確快些。但如果一個頁面有許多DOM節點時，需要來回尋找時，可能需要更多時間:
複製程式碼
程式碼如下:
var divs = $('.testdiv', '#pageBody'); // 2353 on Firebug 3.6
var divs = $('#pageBody').find('.testdiv'); // 2324 on Firebug 3.6 - The best timevar divs = $('#pageBody .testdiv'); // 2469 on Firebug 3.6
十九、 寫屬於你的選擇器
如果你經常在程式碼中使用選擇器，那麼擴展jQuery的$.expr[':']物件吧，編寫你自己的選擇器。在下面的範例中，我建立了一個abovethefold選擇器，用來選擇看不見的元素：
$.extend($.expr[':'], {
abovethefold: function(el) {
return $(el).offset().top }
});
var nonVisibleElements = $('div:abovethefold'); // 選取元素
二十、 快取jQuery物件
將你常用的元素快取起來：
var header = $('#header');
var divs = header.find('div');
var forms = header.find('form');
當要進行DOM插入時，將所有元素封裝成一個元素
二十一、直接的DOM操作很慢。盡可能少的去更改HTML結構。
var menu = '';
$('#header').prepend(menu);
// 千萬不要這樣做：
$('#header').prepend('');
for (var i = 1; i $('#menu').append('
' i '');
}
二十二、 儘管jQuery不會拋出異常，但開發者也應該檢查物件
儘管jQuery不會拋出大量的異常給用戶，但是開發者也不要依賴於此。 jQuery通常會執行了一大堆沒用的函數之後才確定一個物件是否存在。所以在對一個作一系列引用之前，應先檢查一下這個物件存不存在。
二十三. 使用直接函數，而不要使用與與之等同的函數
為了獲得更好的性能，你應該使用直接函數如$.ajax()，而不要使用$.get(),$.getJSON(),$.post()，因為後面的幾個將會呼叫$.ajax()。
二十四、快取jQuery結果，以備後來使用
你經常會獲得一個javasript應用對象－你可以用App.來保存你經常選擇的對象，以備將來使用：
App.hiddenDivs = $(. ');
// 之後在你的應用程式中呼叫：
App.hiddenDivs.find('span');
二十五、採用jQuery的內部函數data( )來儲存狀態
不要忘了採用.data()函數來儲存資訊：
$('#head').data('name', 'value');
// 之後在你的應用程式中呼叫:
$('# head').data('name');
二十六、 使用jQuery utility函數
不要忘了簡單實用的jQuery的utility函數。我最喜歡的是$.isFunction(), $isArray()和$.each()。
二十七、 為HTML區塊加上「JS」的class
當jQuery載入之後，先給HTML加上一個叫」JS」的class
$('HTML').addClass('JS');
只有當用戶啟用JavaScript的時候，才能加入CSS樣式。例如：
/* 在css中*/
.J🎜>
/* 在css中*/.JS # myDiv{display:none;}
所以當JavaScript啟用的時候，你可以將整個HTML內容隱藏起來，用jQuery來實現你想實現的（譬如：收起某些面板或當使用者點擊它們時展開）。而當Javascript沒有啟用的時候，瀏覽器呈現所有的內容，搜尋引擎爬蟲也會勾去所有內容。我將來會更多的使用這個技巧。
二十八、延後到$(window).load有時候採用$(window).load()比$(document).ready()更快，因為後者不等所有的DOM元素都下載完前執行。你應該在使用它之前測試它。
二十九、使用Event Delegation
當你在一個容器中有許多節點，你想對所有的節點都綁定一個事件，delegation很適合這樣的應用場景。使用Delegation，我們只需要在父級綁定事件，然後查看哪個子節點(目標節點)觸發了事件。當你有一個很多資料的table的時候，你想對td節點設定事件，這就變得很方便。先取得table，再為所有的td節點設定delegation事件：
$ ("table").delegate("td", "hover", function(){
$(this).toggleClass("hover");
});
三十、使用ready事件的簡稱
如果你想壓縮js插件，節約每一個字節，你應該避免使用$(document).onready()
// 也不要使用
$(document).ready(function (){
// 程式碼
});
// 你可以如此簡寫：
$(function (){
// 程式碼
});
三十一、jQuery單元測試
測試JavaSript程式碼最好的方法就是人來測試。但你可以使用一些自動化的工具如Selenium，Funcunit，QUit，QMock來測試你的程式碼（尤其是插件）。我想在另外一個專題來討論這個話題因為實在有太多要說的了。
三十二、 標準化你的jQuery代碼
經常標準化你的程式碼，看看哪個查詢比較慢，然後替換它。你可以用Firebug控制台。你也可以使用jQuery的快速函數來讓測試變得更容易：
// 在Firebug控制台記錄資料的捷徑
$.l($('div'));
// 取得UNIX時間戳
$.time();
// 在Firebug記錄執行程式碼時間
$.lt();
$('div');
$.lt();
// 將程式碼區塊放在一個for迴圈中測試執行時間
$.bm("var divs = $('.testdiv', '#pageBody');"); // 2353 on Firebug 3.6
三十三、使用HMTL5
新的HTML5標準帶來的是更輕巧的DOM結構。更輕巧的結構意味著使用jQuery需要更少的遍歷，以及更優良的載入效能。所以如果可能的話請使用HTML5。
三十四、如果給15個以上的元素加樣式時，直接給DOM元素添加style標籤
要給少數的元素加樣式，最好的方法就是使用jQuey的css()函數。然而更15個以上的較多的元素添加樣式時，直接給DOM添加style 標籤更有效些。這個方法可以避免在程式碼中使用硬編碼(hard code)。
$('')
.appendTo('head');
三十五、避免載入多餘的程式碼
將Javascript程式碼放在不同的檔案中是個好的方法，僅在需要的時候載入它們。這樣你不會載入不必要的程式碼和選擇器。也便於管理程式碼。
三十六、壓縮成一個主JS文件，將下載次數保持到最少
當你已經確定了哪些文件是應該被載入的，那麼將它們打包成一個文件。用一些開源的工具可以自動幫你完成，例如使用Minify(和你的後端程式碼整合)或使用JSCompressor，YUI Compressor 或 Dean Edwards JS packer等線上工具可以為你壓縮檔案。我最喜歡的是JSCompressor。
三十七、需要的時候使用原生的Javasript
使用jQuery是個很棒的事情，但是不要忘了它也是Javascript的一個框架。所以你可以在jQuery程式碼有必要的時候也使用原生的Javascript函數，這樣能獲得更好的效能。
三十八、 緩慢載入內容不僅能提高載入速度，還能提高SEO優化（Lazy load content for speed and SEO benefits）
使用Ajax來載入你的網站吧，這樣可以節約伺服器端載入時間。你可以從一個常見的側邊欄widget開始。
