jQuery效能最佳化的一些參考建議

標籤：樣書   代碼   rms   精簡   ie瀏覽器   pre   lin   上下文   std   

JQ3.1 文檔：https://pan.baidu.com/s/1c2vMQdy

一、注意定義jQuery變數的時候添加var關鍵字

　　這個不僅僅是JQ，在JS中都是必須的

二、如果有多個變數可以使用一個var

　　eg:var index=0,$main=$(".main");

三、定義jQuery變數是添加$符號

　　eg:var $main=$(".main");利於代碼的閱讀性

四、DOM操作請務必記住緩衝（cache）

　　DOM操作是非常耗費資源和效能的，一般大部分人喜歡直接這樣：

　　$(".main").html("結束");

　　$(".main").show();

　　更好的是：

　　var $main=$(".main")；

　　再去操作

五、使用鏈式操作

　　上面的可以更簡化：

　　var $main=$(".main")；

　　$main.html("結束").show();

六、精簡jQuery代碼

　　盡量把一些代碼整合到一起，如下面

　　$btn.click(function(){

　　　　$main.css(‘width‘,‘80%‘);

　　　　$main.css(‘display‘,‘block‘);

　　});

　　應該這樣：

　　

　　$btn.click(function(){

　　　　$main.css({

　　　　　　"width":"80%",

　　　　　　"display":"block"

　　　　})

　　});

 

七、避免使用全域類型的選取器

　　請勿如下方式書寫：$(‘.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來實現。

　　eg:for in

十四、總是從#id選取器來繼承

　　這是jQuery選取器的一條黃金法則。jQuery選擇一個元素最快的方法就是用ID來選擇了。

　　或者從ID選取器繼承來選擇多個元素:

　　eg:$(‘#main p‘).hide();

十五、在class前面使用tag

　　jQuery中第二快的選取器就是tag選取器（如$(‘head‘)），因為它和直接來自於原生的Javascript方法　　　　　　　　　

　　getElementByTagName()。所以最好總是用tag來修飾class(並且不要忘了就近的ID)

 

　　jQuery中class選取器是最慢的，因為在IE瀏覽器下它會遍曆所有的DOM節點。盡量避免使用class選取器。也不要用tag來修飾ID。下面的例子會遍曆所有的div元素來尋找id為‘content‘的那個節點

十六、使用子查詢

　　將父物件緩衝起來以備將來的使用

十七、 最佳化選取器以適用Sizzle的“從右至左”模型

　　自版本1.3之後，jQuery採用了Sizzle庫，與之前的版本在選取器引擎上的表現形式有很大的不同。它用“從左至右”的模型代替了“從右至左”的模型。確保最右的選取器具體些，而左邊的選取器選擇範圍較寬泛些：

　　var $linkContacts = $(‘.contact-links div.side-wrapper‘);

十八、 採用find()，而不使用上下文尋找

　　.find()函數的確快些。但是如果一個頁面有許多DOM節點時，需要來回尋找時，可能需要更多時間:

　　var $divs = $(‘#pageBody‘).find(‘.testdiv‘); 

　　

二十、 緩衝jQuery對象

　　將你經常用的元素緩衝起來：

　　eg:

　　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 utility函數

　　不要忘了簡單實用的jQuery的utility函數。我最喜歡的是$.isFunction(), $isArray()和$.each()。

二十五、延遲到$(window).load

　　有時候採用$(window).load()比$(document).ready()更快，因為後者不等所有的DOM元素都下載完之前執行。你應該在使用它之前測試它。

二十六、如果給15個以上的元素加樣式時，直接給DOM元素添加style標籤

　　$(‘<style type="text/css"> div.class { color: red; }</style>‘)
.appendTo(‘head‘);

二十七、壓縮成一個主JS檔案，將下載次數保持到最少

 

jQuery效能最佳化的一些參考建議