jquery性能優化高級技巧

2019-11-20 11:45:28

字體：大中小

來源：轉載

供稿：網友

有時候我們在書寫jquery的時候，為了書寫代碼方便，往往忽略了程序執行過程中，給客戶端帶來的壓力。隨之而來的就是在某些低端瀏覽器或者低端電腦上運行速度緩慢，甚至無法運行等問題。

因此我們有必要對我們自己書寫的jquery代碼進行優化，以達到更快捷、更流暢的運行效果。

jquery性能優化高級技巧，下面主要從七個方面對jquery性能優化做介紹：

1.通過CDN（Content Delivery Network）引入jQuery庫

2.減少DOM操作

3.適當使用原生JS

4.選擇器優化

5.緩存jQuery對象

6.定義一個可以復用的函數

7.用數組方式來遍歷jQuery 對象集合

下面詳解每一個方法的具體說明:

通過CDN（Content Delivery Network）引入jQuery庫

要提升網站中javascript的性能的最簡單的一步就是引入最新版本的jQuery庫，新發布的版本通常在性能上會有更好的提升而且也修復了一下bug?；蛘咄ㄟ^CDN引入也是很好的選擇,通過CDN引入能夠減少網站的加載時間。

以下是一些CDN服務：

<!-- Case 1 - jQuery CDN --><script src="http://code.jquery.com/jquery-1.10.2.min.js" ></script><!-- Case 2 - requesting jQuery from Googles CDN (notice the protocol) --><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script><!-- Case 3 - requesting the latest minor 1.10.x version (only cached for an hour) --><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10/jquery.min.js" ></script><!-- Case 4 - requesting the absolute latest jQuery version (use with caution) --><script src="http://code.jquery.com/jquery.min.js" ></script>

一些國內的CDN服務：

http://www.bootcdn.cn/jquery/<!--新浪 CDN--><script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script><!--百度 CDN--><script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script><!--Bootstrap CDN-->http://www.bootcdn.cn/jquery/

減少DOM操作

雖然javascript性能上有了很大的提升，但是DOM操作還是很耗費資源的，需要減少對DOM操作。當在一個頁面中插入大量的元素的時候，尤其重要。

例如：

<div id="elem" ></div>// 不好的方式//var elem = $('#elem');//for(var i = 0; i < 100; i++){// elem.append('<li>element '+i+'</li>');//}// 好的方式var elem = $('#elem' ),arr = [];for(var i = 0; i < 100; i++){arr. push('<li>element ' +i+'</li>' );}elem. append(arr. join('' ));

將所有的元素緩存起來一次插入性能上會有所提升，因為只觸發頁面一次重繪。對于CSS樣式屬性也是同樣的道理。

更多閱讀：前端頁面卡頓？可能是DOM操作惹的禍，你需要優化代碼

適當使用原生JS

創建jQuery對象會帶來一些開銷。所以，如果比較注重性能的話，盡可能使用原生的javascript。在某些方面可能會更容易理解和寫更少的代碼。例如：

// 打印list中的li的id$('#colors li' ). each(function(){//將$(this).attr('id')方法替換為直接通過ID屬性訪問console. log(this. id);})

選擇器優化

如果你需要更好的性能，但是仍然要用到jQuery，你可以在jQuery選擇器優化做一些嘗試。以下是一個測試程序，通過瀏覽器的控制臺console.time 和console.timeEnd 方法來記錄不同選擇器執行時間。

HTML:

<div id="peanutButter" ><div id="jelly" class=".jellyTime" ></div></div>JS://測試程序var iterations = 10000,  i;//--------------------------------------------//Case 1: 很慢console.time('Fancy');for (i = 0; i < iterations; i++) {  $('#peanutButter div:first');}console.timeEnd('Fancy');//--------------------------------------------//Case 2: 比較好，但仍然很慢console.time('Parent-child');for (i = 0; i < iterations; i++) {  $('#peanutButter div');}console.timeEnd('Parent-child');//--------------------------------------------//Case 3: 一些瀏覽器會比較快console.time('Parent-child by class');for (i = 0; i < iterations; i++) {  // 通過后代Class選擇器  $('#peanutButter .jellyTime');}console.timeEnd('Parent-child by class');//--------------------------------------------//Case 4: 更好的方式 console.time('By class name');21for (i = 0; i < iterations; i++) {  // 直接通過Class選擇器  $('.jellyTime');}console.timeEnd('By class name');//--------------------------------------------//Case 5: 推薦的方式 ID選擇器console.time('By id');for (i = 0; i < iterations; i++) {  $('#jelly');}console.timeEnd('By id');

執行結果：

緩存jQuery對象

每次通過選擇器構建一個新的jQuery對象時，jQuery的核心部分的Sizzle引擎會遍歷DOM然后通過對應的選擇器來匹配真正的dom元素。這種方式比較低效，在現代瀏覽器中可以通過document.querySelector方法通過傳入對應的Class參數來匹配對應的元素，不過IE8以下版本不支持此方法。一個提高性能的實踐是通過變量緩存jQuery對象。例如：

<ul id="pancakes" >     <li>first</li>     <li>second</li>     <li>third</li>     <li>fourth</li>     <li>fifth</li></ul>

JS：

// 不好的方式:// $('#pancakes li').eq(0).remove();// $('#pancakes li').eq(1).remove();// $('#pancakes li').eq(2).remove();// ------------------------------------// 推薦的方式:var pancakes = $('#pancakes li');pancakes.eq(0).remove();pancakes.eq(1).remove();pancakes.eq(2).remove();// ------------------------------------// 或者:// pancakes.eq(0).remove().end()// .eq(1).remove().end()// .eq(2).remove().end();

定義一個可以復用的函數

直接上例子：

HTML：<button id="menuButton" >Show Menu!</button><a href="#" id="menuLink" >Show Menu!</a>

JS：

//Bad: //這個會導致多個回調函數的副本占用內存$('#menuButton, #menuLink' ). click(function(){// ...});//----------------------------------------------//Betterfunction showMenu(){alert('Showing menu!' );// Doing something complex here}$('#menuButton' ). click(showMenu);$('#menuLink' ). click(showMenu);

如果定義一個內聯(inline)回調函數同時這個包含多個元素的jQuery對象（正如上面所說的第一個例子），對于這個集合中的每個元素都會在內存中保存一個回調函數的副本。

用數組方式來遍歷jQuery 對象集合

你或許沒有注意到，但是在性能方面，對于jQuery each方法這種優雅實現是有代價的。有一個辦法能夠更快地遍歷一個jQuery對象。就是通過數組來實現，jQuery對象集合就是一個類數組，具有length和value屬性?？梢酝ㄟ^程序來測試一下性能：

HTML:

<ul id="testList" >  <li>Item</li>  <li>Item</li>  <li>Item</li>  <li>Item</li>   <li>Item</li>  <li>Item</li>  <li>Item</li>  <li>Item</li>  <li>Item</li>  <!-- add 50 more --></ul>

JS:

var arr = $('li'),  iterations = 100000;//------------------------------// Array實現：  console.time('Native Loop');for (var z = 0; z < iterations; z++) {  var length = arr.length;  for (var i = 0; i < length; i++) {    arr[i];  }}console.timeEnd('Native Loop');//------------------------------// each實現：  console.time('jQuery Each');for (z = 0; z < iterations; z++) {  arr.each(function(i, val) {    this;  });}console.timeEnd('jQuery Each');

結果：