十個技巧迅速提高JQuery性能

本文提供即刻提高你的腳本性能的十個步驟。不用擔憂，這並非什麼高深的技巧。人人皆可運用！這些技巧包括：javascript

使用最新版本
合併、最小化腳本
用for替代each
用ID替代class選擇器
給選擇器指定先後文
創建緩存
避免DOM操做
避免使用concat()，利用join()處理長字串
返回false值
利用小抄和參考文檔

使用最新版本

jQuery一直處於不斷的開發和改進過程當中。 John 和他的團隊不斷研究着提高程序性能的新方法。php

一點題外話，幾個月前他還發布了Sizzle，一個聽說能在Firefox中把程序性能提高3倍的JS選擇器庫。css

若是你不想時刻關注是否有新版本，而後再花時間下載上傳，Google 就又能幫你一把了。他們的服務器上存儲了大量Ajax庫供您選擇。html

 
      01 
      <!-- 利用一個簡單的script標籤調用API --> 
     
      02 
      <script type="text/javascript" src="http://www.google.com/jsapi"></script> 
     
      03 
      <script type="text/javascript"> 
     
      04 
      /* 加載 jQuery v1.3.2 */ 
     
      05 
      google.load ("jquery", "1.3.2", {uncompressed: false}); 
     
      06 
        
      07 
      /* 加載完成後彈出消息 */ 
     
      08 
      function onLoad () { 
     
      09 
      alert ("jQuery + Google API!"); 
     
      10 
      } 
     
      11 
        
      12 
      google.setOnLoadCallback (onLoad); 
     
      13 
      </script>

另外一個更爲簡單快速的方法是直接使用腳本連接。若是要使用特定版本的jQuery，你可使用上面的方法；若是想直接使用最新版，下面這句代碼就夠了：java

`1`	`<script type="text/javascript"` `src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>`

特定版本的還能夠這樣加載：jquery

`1`	`<script type="text/javascript"` `src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>`

合併、最小化腳本

大部分瀏覽器都不能同時處理多個腳本文件，因此它們都是排隊加載——加載時間也相應地延長了。ajax

考慮到你網站的每一個頁面都會加載這些腳本，你應該考慮把它們放到單個文件中，而後利用壓縮工具（好比 Dean Edwards 的這款）把它們最小化。更小的文件無疑將帶來更快的加載速度。express

JavaScript和CSS壓縮的目的是在保持腳本的執行性能的同時，減小數據傳遞的字節數（能夠經過減少原始文件，也能夠利用gzip。大多數產品級的網絡服務器都把gzip做爲HTTP協議的一部分）。引自 YUI compressor，一款 jQuery官方推薦的壓縮腳本的工具。api

用for替代each

原生函數老是比輔助組件更快。數組

若是遇到須要遍歷對象的狀況（如從遠程接收的JSON對象），你最好重寫你的（JSON）對象爲一個數組，數組的循環處理要容易些。

利用Firebug，咱們能測定每一個函數的執行時間。

 
      1 
      var array = new Array (); 
     
      2 
      for (var i=0; i<10000; i++) { 
     
      3 
      array[i] = 0; 
     
      4 
      } 
     
      5 
      console.time('native');  //原生for函數 
     
      6 
      var l = array.length; 
     
      7 
      for (var i=0; i<10000; i++) { 
     
      8 
      }

上面的結果顯示原生代碼只需2毫秒就作到的事，利用jQuery的each方法須要26毫秒。並且這還只是我在本機上測試一個基本上啥也沒作的函數的結果，當遇到更復雜的狀況，例如設置css屬性或DOM操做時，時間差別確定更大。

用ID替代class選擇器

利用ID選擇對象要好得多，由於這時jQuery會使用瀏覽器的原生函數getElementByID()來獲取對象，查詢速度很快。

所以，比起利用那些方便的css選擇技巧，使用更爲複雜的選擇器也是值得的（jQuery也爲咱們提供了複雜選擇器）。你也能夠手工書寫本身的選擇器（其實比你想象中簡單），或者爲你想要選擇的元素指定一個有ID的容器。

 
      01 
      //下例建立一個列表而且填充條目內容 
     
      02 
      //而後每一個條目都被選擇一次 
     
      03 
        
      04 
      //首先使用class選擇 
     
      05 
      console.time('class'); 
     
      06 
      var list = $('#list'); 
     
      07 
      var items = ' 
     
      08 
      '; 
     
      09 
        
      10 
      for (i=0; i<1000; i++) { 
     
      11 
      items += ' 
     
      12 
      item 
     
      13 
        
      14 
        
      15 
      '; 
     
      16 
      } 
     
      17 
        
      18 
      items += ' 
     
      19 
        
      20 
        
      21 
      '; 
     
      22 
      list.html (items); 
     
      23 
        
      24 
      for (i=0; i<1000; i++) { 
     
      25 
      var s = $('.item' + i); 
     
      26 
      } 
     
      27 
      console.timeEnd('class'); 
     
      28 
        
      29 
      //而後利用ID選擇 
     
      30 
      console.time('id'); 
     
      31 
      var list = $('#list'); 
     
      32 
      var items = ' 
     
      33 
      '; 
     
      34 
        
      35 
      for (i=0; i<1000; i++) { 
     
      36 
      items += ' 
     
      37 
      item 
     
      38 
        
      39 
        
      40 
      '; 
     
      41 
      } 
     
      42 
        
      43 
      items += ' 
     
      44 
        
      45 
        
      46 
      '; 
     
      47 
      list.html (items); 
     
      48 
        
      49 
      for (i=0; i<1000; i++) { 
     
      50 
      var s = $('#item' + i); 
     
      51 
      } 
     
      52 
      console.timeEnd('id');

上面的例子很好地說明了不一樣選擇方式之間的顯著性能差別。請看下圖，利用class來作選擇，時間無限增大，甚至超過了五秒。

給選擇器指定先後文

jQuery的參考文檔裏說：傳遞給jQuery() 原始DOM節點的先後文（若是沒有東西被傳遞，則先後文爲整個文檔）。目的是連同選擇器一塊兒，實現更爲準確的查詢。

因此，若是你必定要利用class來指定目標，至少爲選擇器指定上下文，以避免jQuery費精力去遍歷整個DOM文檔：

與其這樣寫：

 
      1 
      $('.class').css ('color' '#123456');

爲選擇器加上先後文比較好（expression: 目標選擇器；context: 先後文）：

 
      1 
      $(expression, context)

也就是說：

 
      1 
      $('.class', '#class-container').css ('color', '#123456');

這樣作要快得多，由於它不用遍歷整個DOM。只要找到#class-container就行了。

創建緩存

不要犯不斷從新選擇同一個東西的錯誤。你應該把你要處理的元素緩存爲一個變量。

更不要在一個循環裏重複選擇同一個元素！這樣作十分影響速度！

 
      01 
      $('#item').css('color', '#123456'); 
     
      02 
      $('#item').html('hello'); 
     
      03 
      $('#item').css('background-color', '#ffffff'); 
     
      04 
        
      05 
      // 這樣寫更好 
     
      06 
      $('#item').css('color', '#123456').html('hello').css('background-color', '#ffffff'); 
     
      07 
        
      08 
      // 甚至這樣 
     
      09 
      var item = $('#item'); 
     
      10 
      item.css('color', '#123456'); 
     
      11 
      item.html('hello'); 
     
      12 
      item.css('background-color', '#ffffff'); 
     
      13 
        
      14 
      // 遇到循環,這樣作很是很差 
     
      15 
      console.time('no cache'); 
     
      16 
      for (var i=0; i<1000; i++) { 
     
      17 
      $('#list').append(i); 
     
      18 
      } 
     
      19 
      console.timeEnd('no cache'); 
     
      20 
        
      21 
      // 下面這樣要好得多 
     
      22 
      console.time('cache'); 
     
      23 
      var item = $('#list'); 
     
      24 
        
      25 
      for (var i=0; i<1000; i++) { 
     
      26 
      item.append (i); 
     
      27 
      } 
     
      28 
      console.timeEnd('cache');

避免DOM操做

DOM操做應該越少越好，由於諸如prepend()，append()，after()的插入動做都很費時。上面的例子若是用html()會更快：

 
      01 
      var list = ''; 
     
      02 
        
      03 
      for (var i=0; i<1000; i++) { 
     
      04 
      list += ' 
     
      05 
      '+i+' 
     
      06 
        
      07 
        
      08 
      '; 
     
      09 
      } 
     
      10 
        
      11 
      ('#list').html (list);

避免使用concat()，利用join()處理長字串

聽起來可能挺奇怪，不過這樣作真的能提高速度，尤爲是當鏈接特別長的字串時。先創建一個數組，放入你想要串聯的東西。join()方法比字符串的concat()函數要快得多。

 
      1 
      var array = []; 
     
      2 
      for (var i=0; i< =10000; i++) { 
     
      3 
      array[i] = ' 
     
      4 
      '+i+''; 
     
      5 
      } 
     
      6 
        
      7 
      $('#list').html(array.join (''));

「 += 操做符更快——比把字串片斷放到數組中而後join起來還要快」，「做爲字串緩衝（string buffer）的數組在大部分瀏覽器中都比string.prototype.concat.apply方法效率更高，Windows下的Firefox 2.0.0.14例外。」 — Tom Trenka

返回false值

您可能已經注意到，若是函數執行後不返回false，你就會被跳轉到頁面頂部。若是頁面較長，這種反應是很煩人的。

因此，與其這樣：

 
      1 
      $('#item').click (function () { 
     
      2 
        
      3 
      // stuff here 
     
      4 
      });

不如多加一句：

 
      1 
      $('#item').click (function () { 
     
      2 
      // stuff here 
     
      3 
      return false; 
     
      4 
      });