提高jquery程式碼效能的幾個措施

antzone發表於2017-03-20
jQuery

程式碼效能的提交需要注意很多細節，實現相同功能的程式碼在執行效率上可能有很大的差距，在各種環境良好的情況下，可能沒有什麼差別，但是在一些比較惡劣的軟硬體條件下，高效率的程式碼的優勢就會得到體現。下面分享幾種能夠提高程式碼執行效率的方式，希望能夠給需要的朋友帶來一定的幫助。

一.jquery檔案引用技巧:

通常情況下，jquery檔案的引用都是放入head標籤之內，其實這不是最優的方式，最好是儘可能的放在body的結束之前放置，也就是說盡可能的靠近body結束標籤。如果是使用的第三方的CDN來引入jquery檔案，那麼最好要做兩手準備，雖然當前國內的第三方CDN速度都是非常好的，但是也要防止萬一，比如谷歌被牆就引起了很多問題，程式碼如下:

[HTML] 純文字檢視 複製程式碼
<body> 
  <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
 <script>window.jQuery || document.write('<script src="jquery1.8.min.js">\x3C/script>')</script>
</body>

二.合理使用選擇器:

合理的使用選擇器可以有效的節省查詢的事件，當然也就能夠提高程式碼的效能。

[HTML] 純文字檢視 複製程式碼
<div id="nav" class="nav">
 <a class="antzone" href="http://www.softwhy.com">螞蟻部落</a>
 <a class="css" href="#">css教程</a>
</div>

上面是一個簡單的元素結構，下面就通過選擇器對相應的元素進行查詢。

[JavaScript] 純文字檢視 複製程式碼
$('.antzone');
$('#nav a.antzone');
$('#nav').find('a.antzone');

1.$('.antzone'):這是要在整個文件中進行查詢，效率自然不會很高。

2.$('#nav a.antzone'):這是在id屬性值為nav的元素下查詢，範圍縮小了，效率自然會提高。

3.$('#nav').find('a.antzone'):此種方式又會比上一種要提高很多。

三.快取jquery物件:

可以將獲取的jquery物件快取起來重複使用，程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
var oantzone=$('.antzone');
var height=oantzone.height();
var width=oantzone.width();

上面的程式碼就是將jquery物件快取起來，以免每次都要$('.antzone')獲取。

四.使用委託:

在某些場景下，使用委託可以有效的提高效能，例如有一個需求要實現點選每一個td單元格執行一段程式碼，如果td單元格數量眾多，那麼挨個註冊事件處理函式是一件難以想象的工作，不過我們可以利用委託實現此功能。程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
$('#antzone').on('click','td',function(){
  $(this).css('color', 'red').css('background', '#ccc');
});

五.對jquery程式碼進行精簡:

儘量做到對程式碼進行精簡，比如上面的程式碼就可以精簡為如下程式碼:

[JavaScript] 純文字檢視 複製程式碼
$('#antzone').on('click','td',function(){
  $(this).css({'color':'red','background':'#ccc'});
});

六.儘可能的減少dom操作:

操作dom是一件非常耗費效能的事情，所以儘可能的減少dom操作，程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
var $antzone=$('body');
$antzone.append('<table>');
$antzone.append('<tr><td>螞蟻部落</td></tr>');
$antzone.append('</table>');

上面的程式碼最好修改成如下程式碼:

[JavaScript] 純文字檢視 複製程式碼
$('body').append('<table><tr><td>螞蟻部落</td></tr></table>');

相關文章