天天看點
傳回

即刻提升jQuery性能的十個技巧[TUTS+]

本文提供即刻提升你的腳本性能的十個步驟。不用擔心，這并不是什麼高深的技巧。人人皆可運用！

這些技巧包括：

使用最新版本

合并、最小化腳本

用for替代each

用ID替代class選擇器

給選擇器指定前後文

建立緩存

避免DOM操作

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

傳回false值

利用小抄和參考文檔

即刻提升jQuery性能的十個技巧[TUTS+]

<code>01</code>

<code>&lt;!-- 利用一個簡單的script标簽調用API --&gt;</code>

<code>02</code>

<code>03</code>

<code>&lt;script type=</code><code>"text/javascript"</code><code>&gt;</code>

<code>04</code>

<code>/* 加載 jQuery v1.3.2 */</code>

<code>05</code>

<code>google.load (</code><code>"jquery"</code><code>, </code><code>"1.3.2"</code><code>, {uncompressed: </code><code>false</code><code>});</code>

<code>06</code>

<code>/* 加載完成後彈出消息 */</code>

<code>07</code>

<code>function</code> <code>onLoad () {</code>

<code>08</code>

<code>alert (</code><code>"jQuery + Google API!"</code><code>);</code>

<code>09</code>

<code>}</code>

<code>10</code>

<code>google.setOnLoadCallback (onLoad);</code>

<code>11</code>

<code>&lt;/script&gt;</code>

編輯按：另一個更為簡單快速的方法是直接使用腳本連結。如果要使用特定版本的jQuery，你可以使用上面的方法；如果想直接使用最新版，下面這句代碼就夠了：

<code>1</code>

笨活兒：特定版本的還可以這樣加載：

即刻提升jQuery性能的十個技巧[TUTS+]

大部分浏覽器都不能同時處理多個腳本檔案，是以它們都是排隊加載——加載時間也相應地延長了。

JavaScript和CSS壓縮的目的是在保持腳本的執行性能的同時，減少資料傳遞的位元組數（可以通過減小原始檔案，也可以利用gzip。大多數産品級的網絡伺服器都把gzip作為HTTP協定的一部分）。

原生函數總是比輔助元件更快。

如果遇到需要周遊對象的情況（如從遠端接收的JSON對象），你最好重寫你的（JSON）對象為一個數組，數組的循環處理要容易些。

<code>var</code> <code>array = </code><code>new</code> <code>Array ();</code>

<code>2</code>

<code>for</code> <code>(</code><code>var</code> <code>i=0; i&lt;10000; i++) {</code>

<code>3</code>

<code>array[i] = 0;</code>

<code>4</code>

<code>5</code>

<code>console.time(</code><code>'native'</code><code>);  </code><code>//原生for函數</code>

<code>6</code>

<code>var</code> <code>l = array.length;</code>

<code>7</code>

<code>for</code> <code>(</code><code>var</code> <code>i=0;i</code>

即刻提升jQuery性能的十個技巧[TUTS+]

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

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

是以，比起利用那些友善的css選擇技巧，使用更為複雜的選擇器也是值得的（jQuery也為我們提供了複雜選擇器）。你也可以手工書寫自己的選擇器（其實比你想象中簡單），或者為你想要選擇的元素指定一個有ID的容器。

<code>//下例建立一個清單并且填充條目内容</code>

<code>//然後每個條目都被選擇一次</code>

<code>//首先使用class選擇</code>

<code>console.time(</code><code>'class'</code><code>);</code>

<code>var</code> <code>list = $(</code><code>'#list'</code><code>);</code>

<code>var</code> <code>items = '</code>

<code>&lt;ul&gt;';</code>

<code>for</code> <code>(i=0; i&lt;1000; i++) {</code>

<code>items += '</code>

<code>&lt;li&gt;item&lt;/li&gt;</code>

<code>';</code>

<code>12</code>

<code>13</code>

<code>items += '&lt;/ul&gt;</code>

<code>14</code>

<code>15</code>

<code>list.html (items);</code>

<code>16</code>

<code>17</code>

<code>var</code> <code>s = $(</code><code>'.item'</code> <code>+ i);</code>

<code>18</code>

<code>19</code>

<code>console.timeEnd(</code><code>'class'</code><code>);</code>

<code>20</code>

<code>//然後利用ID選擇</code>

<code>21</code>

<code>console.time(</code><code>'id'</code><code>);</code>

<code>22</code>

<code>23</code>

<code>24</code>

<code>25</code>

<code>26</code>

<code>27</code>

<code>&lt;li id=</code><code>"item' + i + '"</code><code>&gt;item&lt;/li&gt;</code>

<code>28</code>

<code>29</code>

<code>30</code>

<code>31</code>

<code>32</code>

<code>33</code>

<code>34</code>

<code>var</code> <code>s = $(</code><code>'#item'</code> <code>+ i);</code>

<code>35</code>

<code>36</code>

<code>console.timeEnd(</code><code>'id'</code><code>);</code>

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

即刻提升jQuery性能的十個技巧[TUTS+]
傳遞給jQuery() 原始DOM節點的前後文（如果沒有東西被傳遞，則前後文為整個文檔）。 目的是連同選擇器一起，實作更為準确的查詢。

與其這樣寫：

<code>$(</code><code>'.class'</code><code>).css (</code><code>'color'</code> <code>'#123456'</code><code>);</code>

為選擇器加上前後文比較好（expression: 目标選擇器；context: 前後文）：

<code>$(expression, context)</code>

也就是說：

<code>$(</code><code>'.class'</code><code>, </code><code>'#class-container'</code><code>).css (</code><code>'color'</code><code>, </code><code>'#123456'</code><code>);</code>

這樣做要快得多，因為它不用周遊整個DOM。隻要找到#class-container就好了。

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

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

<code>$(</code><code>'#item'</code><code>).css(</code><code>'color'</code><code>, </code><code>'#123456'</code><code>);</code>

<code>$(</code><code>'#item'</code><code>).html(</code><code>'hello'</code><code>);</code>

<code>$(</code><code>'#item'</code><code>).css(</code><code>'background-color'</code><code>, </code><code>'#ffffff'</code><code>);</code>

<code>// 這樣寫更好</code>

<code>$(</code><code>'#item'</code><code>).css(</code><code>'color'</code><code>, </code><code>'#123456'</code><code>).html(</code><code>'hello'</code><code>).css(</code><code>'background-color'</code><code>,</code><code>'#ffffff'</code><code>);</code>

<code>// 甚至這樣</code>

<code>var</code> <code>item = $(</code><code>'#item'</code><code>);</code>

<code>item.css(</code><code>'color'</code><code>, </code><code>'#123456'</code><code>);</code>

<code>item.html(</code><code>'hello'</code><code>);</code>

<code>item.css(</code><code>'background-color'</code><code>, </code><code>'#ffffff'</code><code>);</code>

<code>// 遇到循環,這樣做非常不好</code>

<code>console.time(</code><code>'no cache'</code><code>);</code>

<code>for</code> <code>(</code><code>var</code> <code>i=0; i&lt;1000; i++) {</code>

<code>$(</code><code>'#list'</code><code>).append(i);</code>

<code>console.timeEnd(</code><code>'no cache'</code><code>);</code>

<code>// 下面這樣要好得多</code>

<code>console.time(</code><code>'cache'</code><code>);</code>

<code>var</code> <code>item = $(</code><code>'#list'</code><code>);</code>

<code>item.append (i);</code>

<code>console.timeEnd(</code><code>'cache'</code><code>);</code>

如下圖所示，即使是相對較短的疊代，緩存的效果還是很明顯的。

即刻提升jQuery性能的十個技巧[TUTS+]

<code>var</code> <code>list = </code><code>''</code><code>;</code>

<code>list += '</code>

<code>&lt;li&gt;</code><code>'+i+'</code><code>&lt;/li&gt;</code>

<code>(</code><code>'#list'</code><code>).html (list);</code>

聽起來可能挺奇怪，不過這樣做真的能提升速度，尤其是當連接配接特别長的字串時。

先建立一個數組，放入你想要串聯的東西。join()方法比字元串的concat()函數要快得多。

<code>var</code> <code>array = [];</code>

<code>for</code> <code>(</code><code>var</code> <code>i=0; i&lt; =10000; i++) {</code>

<code>array[i] = '</code>

<code>&lt;li&gt;</code><code>'+i+'</code><code>';</code>

<code>$(</code><code>'#list'</code><code>).html(array.join (</code><code>''</code><code>));&lt;/li&gt;</code>

即刻提升jQuery性能的十個技巧[TUTS+]
“ += 操作符更快——比把字串片段放到數組中然後join起來還要快”，“作為字串緩沖（string buffer）的數組在大部分浏覽器中都比string.prototype.concat.apply方法效率更高，Windows下的Firefox 2.0.0.14例外。” — Tom Trenka

您可能已經注意到，如果函數執行後不傳回false，你就會被跳轉到頁面頂部。

如果頁面較長，這種反應是很煩人的。

是以，與其這樣：

<code>$(</code><code>'#item'</code><code>).click (</code><code>function</code> <code>() {</code>

<code>// stuff here</code>

<code>});</code>

不如多加一句：

<code>return</code> <code>false</code><code>;</code>

即刻提升jQuery性能的十個技巧[TUTS+]

請在手邊随時放一張小抄以作快速參考。

©請尊重作者和譯者。若需轉載，務必保留原文連結。
Web App開發 緩存 javascript 前端開發 資料格式 json api 容器 Windows 存儲 query性能 JQuery性能
上一篇: 為EasyUI 的Tab 标簽添加右鍵菜單
下一篇: ubuntu11.04更改預設JDK

繼續閱讀