必看的 jQuery性能優化的38個建議
https://blog.csdn.net/u011043843/article/details/28128171
一、註意定義jQuery變量的時候加入varkeyword
這個不不過jQuery，全部javascript開發過程中，都須要註意，請一定不要定義成例如以下：
$loading = $(‘#loading‘); //這個是全局定義。不知道哪裏位置倒黴引用了同樣的變量名，就會郁悶至死的
二、請使用一個var來定義變量
假設你使用多個變量的話。請例如以下方式定義：
.代碼例如以下:
varpage = 0,
?? $loading = $(‘#loading‘),
?? $body = $(‘body‘);
不要給每個變量都加入一個varkeyword，除非你有嚴重的強迫癥
三、定義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();
六、精簡jQuery代碼
盡量把一些代碼都整合到一起。請勿這樣編碼：
.代碼例如以下:
// ！！反面人物
$button.click(function(){
??? $target.css(‘width‘,‘50%‘);
??? $target.css(‘border‘,‘1px solid #202020‘);
??? $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‘).hide();
或者從ID選擇器繼承來選擇多個元素:
.代碼例如以下:
$(‘#contentp‘).hide();
十五、在class前面使用tag
jQuery中第二快的選擇器就是tag選擇器（如$(‘head‘)），由於它和直接來自於原生的Javascript方法getElementByTagName()。所以最好總是用tag來修飾class(而且不要忘了就近的ID)
.代碼例如以下:
varreceiveNewsletter = $(‘#nslForm input.on‘);
jQuery中class選擇器是最慢的，由於在IE瀏覽器下它會遍歷全部的DOM節點。
盡量避免使用class選擇器。也不要用tag來修飾ID。
以下的樣例會遍歷全部的div元素來查找id為‘content‘的那個節點：
.代碼例如以下:
varcontent = $(‘div#content‘); // 非常慢。不要使用
用ID來修飾ID也是畫蛇添足：
.代碼例如以下:
vartraffic_light = $(‘#content #traffic_light‘); // 非常慢。不要使用
十六、使用子查詢
將父對象緩存起來以備將來的使用
.代碼例如以下:
varheader = $(‘#header‘);
var menu = header.find(‘.menu‘);
// 或者
var menu = $(‘.menu‘, header);
十七、 優化選擇器以適用Sizzle的“從右至左”模型
自版本號1.3之後，jQuery採用了Sizzle庫。與之前的版本號在選擇器引擎上的表現形式有非常大的不同。它用“從左至右”的模型取代了“從右至左”的模型。
確保最右的選擇器詳細些。而左邊的選擇器選擇範圍較寬泛些：
.代碼例如以下:
varlinkContacts = $(‘.contact-links div.side-wrapper‘);
而不要使用
.代碼例如以下:
varlinkContacts = $(‘a.contact-links .side-wrapper‘);
十八、 採用find()。而不使用上下文查找
.find()函數的確快些。
可是假設一個頁面有很多DOM節點時。須要來回查找時，可能須要很多其他時間:
.代碼例如以下:
vardivs = $(‘.testdiv‘, ‘#pageBody‘); // 2353 on Firebug 3.6
var divs = $(‘#pageBody‘).find(‘.testdiv‘); // 2324 on Firebug 3.6 - The besttime
var divs = $(‘#pageBody .testdiv‘); // 2469 on Firebug 3.6
十九、 編寫屬於你的選擇器
假設你常常在代碼中使用選擇器，那麽擴展jQuery的$.expr[‘:‘]對象吧。編寫你自己的選擇器。以下的樣例中，我創建了一個abovethefold選擇器，用來選擇不可見的元素：
.代碼例如以下:
$.extend($.expr[‘:‘],{
?abovethefold: function(el) {
??return $(el).offset().top < $(window).scrollTop() +$(window).height();
?}
});
var nonVisibleElements = $(‘div:abovethefold‘); // 選擇元素
二十、 緩存jQuery對象
將你常常常使用的元素緩存起來：
.代碼例如以下:
var header = $(‘#header‘);
var divs = header.find(‘div‘);
var forms = header.find(‘form‘);
當要進行DOM插入時，將全部元素封裝成一個元素
二十一、直接的DOM操作非常慢。
盡可能少的去更改HTML結構。
.代碼例如以下:
var menu = ‘<ul id="menu">‘;
for (var i = 1; i < 100; i++) {
menu += ‘<li>‘ + i + ‘</li>‘;
}
menu += ‘</ul>‘;
$(‘#header‘).prepend(menu);
// 千萬不要這樣做：
$(‘#header‘).prepend(‘<ul id="menu"></ul>‘);
for (var i = 1; i < 100; i++) {
$(‘#menu‘).append(‘<li>‘ + i + ‘</li>‘);
}
二十二、 雖然jQuery不會拋出異常，但開發人員也應該檢查對象
雖然jQuery不會拋出大量的異常給用戶。可是開發人員也不要依賴於此。
jQuery一般會運行了一大堆無用的函數之後才確定一個對象是否存在。
所以在對一個作一系列引用之前，應先檢查一下這個對象存不存在。
二十三. 使用直接函數。而不要使用與與之等同的函數
為了獲得更好的性能。你應該使用直接函數如$.ajax()，而不要使用$.get(),$.getJSON(),$.post()，由於後面的幾個將會調用$.ajax()。
二十四、緩存jQuery結果。以備後來使用
你常常會獲得一個javasript應用對象——你能夠用App.來保存你常常選擇的對象，以備將來使用：
.代碼例如以下:
App.hiddenDivs = $(‘div.hidden‘);
// 之後在你的應用中調用：
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中 */
.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的快捷函數來使測試變得更easy些：
.代碼例如以下:
// 在Firebug控制臺記錄數據的快捷方式
$.l($(‘div‘));
// 獲取UNIX時間戳
$.time();
// 在Firebug記錄運行代碼時間
$.lt();
$(‘div‘);
$.lt();
// 將代碼塊放在一個for循環中測試運行時間
$.bm("var divs = $(‘.testdiv‘, ‘#pageBody‘);"); // 2353 on Firebug3.6
三十三、使用HMTL5
新的HTML5標準帶來的是更輕巧的DOM結構。更輕巧的結構意味著使用jQuery須要更少的遍歷，以及更優良的加載性能。所以假設可能的話請使用HTML5。
三十四、假設給15個以上的元素加樣式時。直接給DOM元素加入style標簽
要給少數的元素加樣式，最好的方法就是使用jQuey的css()函數。然而更15個以上的較多的元素加入樣式時，直接給DOM加入style 標簽更有效些。
這種方法能夠避免在代碼中使用硬編碼(hard code)。
.代碼例如以下:
$(‘<style type="text/css"> div.class { color: red; }</style>‘)
.appendTo(‘head‘);
三十五、避免加載多余的代碼
將Javascript代碼放在不同的文件裏是個好的方法。僅在須要的時候加載它們。
這樣你不會加載不必要的代碼和選擇器。也便於管理代碼。
三十六、壓縮成一個主JS文件，將下載次數保持到最少
當你已經確定了哪些文件是應該被加載的，那麽將它們打包成一個文件。
用一些開源的工具能夠自己主動幫你完成。如使用Minify(和你的後端代碼集成)或者使用JSCompressor，YUI Compressor 或 Dean Edwards JS packer等在線工具能夠為你壓縮文件。我最喜歡的是JSCompressor。
三十七、須要的時候使用原生的Javasript
使用jQuery是個非常棒的事情。可是不要忘了它也是Javascript的一個框架。所以你能夠在jQuery代碼有必要的時候也使用原生的Javascript函數，這樣能獲得更好的性能。
三十八、緩慢加載內容不僅能提高加載速度，也能提高SEO優化 （Lazy loadcontent for speed and SEO benefits）
使用Ajax來加載你的站點吧，這樣能夠節約server端加載時間。你能夠從一個常見的側邊欄widget開始。
必看的 jQuery性能優化的38個建議