jQuery的系統性能指標和調優方法

　　本文的寫作靈感源自讀者關于先前一篇文章的電子郵件反饋;該郵件這樣寫道 “jQuery 在簡單的頁面上無可挑剔，但在復雜的頁面上性能極其低下。在解決性能問題之前，您必須對復雜頁面使用常規的 JavaScript。” 這立即讓我想到 “jQuery 和 JavaScript 之間的性能比較會是什么樣的?”事實上，我很少看到將 jQuery 庫與 JavaScript 或其他 JavaScript 庫進行比較的文章。我可能像大多數人一樣，僅看到用 jQuery 編寫客戶端代碼的簡易，而忽略了可能的性能問題。在我看來，在易用性和性能之間進行折衷是值得的。但是，存在這樣一種折衷嗎?jQuery 是不是比 “一般” 的 JavaScript 慢?jQuery 是不是比其他庫慢?本文將嘗試解答這些問題。

　　度量 JavaScript 性能要考慮的最重要問題是執行 JavaScript 的環境。因為代碼是運行在客戶端上的，所以它的執行依賴于客戶端計算機，這使得客戶端機器成為影響性能的最重要因素。很明顯，運行 4 核 CPU 的新服務器執行代碼的速度肯定要比 400 MHz 老式處理器快。這是毫無疑問的。不過，由于您不能控制 Web 應用程序用戶用于訪問您的站點的機器，所以在度量性能時要考慮關于硬件的許多因素。

　　JavaScript 性能的另一個重要方面是用于運行 JavaScript 的瀏覽器，JavaScript 新手可能不容易發覺這個影響因素。每個瀏覽器內部都包含一個 JavaScript 引擎，即用于解析和執行 JavaScript 代碼并處理 Web 應用程序頁面的本機代碼。因此，JavaScript 的性能嚴重依賴于客戶端使用的瀏覽器，并且在某些情況下，您可以 控制用戶使用的瀏覽器。本文提供一些關于 JavaScript 性能的指導原則，并解釋不同瀏覽器對性能的影響。

　　最后，在總結 JavaScript，尤其是 jQuery 的性能之后，我將確定一些能夠改進 jQuery 代碼性能的最佳實踐，充分利用運行得最快的代碼部分，而盡量避免運行得最慢的代碼部分。在您閱讀完本文之后，“jQuery 的性能好嗎” 這個問題將得到解答，并且給我發送那封電子郵件的人也將知道他的斷言是否正確。

　　創建性能測試

　　關于性能測試的第一步是創建一個合適的性能測試。jQuery 以及其他 JavaScript 庫在代碼中扮演的最重要角色就是使用選擇查找特定頁面元素。我在最初的性能測試中就以這方面為重點。一個良好的性能測試應該真正地發揮 JavaScript 庫的全部力量，用包含數千個頁面元素的頁面測試它。應該運行所有選擇方法，讓我看到哪個選擇方法最快，哪個最慢。測試應該事先知道正確的答案，從而確定 JavaScript 庫是否正確地執行選擇方法。最后，應該顯示所有結果，并附帶所用的運行時間，讓我能夠在所有庫之間進行比較。

　　我差點忽略了性能測試的最重要方面：它應該是免費的。畢竟這個系列文章的不成文規則就是相互利用彼此的成果，因此我繼續發揚這種精神，在此使用一個現成的 JavaScript 庫性能測試。這個測試稱為 SlickSpeed Selectors Test(見 參考資料)，它非常適合我的需求。它將 jQuery 1.2.6(撰寫本文時的最新版本)與其他 4 個流行的 JavaScript 庫(MooTools、Prototype、YUI 和 Dojo)進行比較。然后，它使用帶有數千個頁面元素的頁面運行40個選擇測試。換句話說，這是我所希望的最佳性能測試。我將在第一個性能測試分析中使用該測試。

　　對比JavaScript 庫的性能

　　對于第一個性能測試，我使用的運行環境是 2.2 GHz 處理器、2 GB RAM 和 Firefox 3.0.3(非常重要)。我在該配置下運行 5 次測試，圖 1 顯示了 5 次運行的平均結果。

　　圖 1. 性能測試 1 的結果

　　從第一次測試能夠得出什么結論?現在我們僅關注總體結果，而不是每次測試。在獲得一些總體結論之后，我將稍后在本文中關注每個測試。

　　◆ 結論 1：YUI 慢到了極點!

　　對，與其他庫相比，YUI 真的很慢。仔細查看每個測試，找出為什么這個庫在選擇元素組(例如 “p, a”)時非常慢。對于要求具有很好性能的頁面而言，這個庫是最差的選擇。

　　◆ 結論 2：Mootools、jQuery 和 Dojo 的運行時間幾乎一樣。

　　與其他兩個庫相比，這 3 個庫是非?？斓?，并且 Dojo 是它們當中最快的，而 jQuery 是最慢的。但是從全局考慮，它們之間的速度是很接近的。

　　◆ 結論 3：這些庫之間的相對差別還是比較明顯的。

　　度量最快時間/最慢時間以確定速度的相對差別，您可以看到相對差別為 332%。這個差別是比較大的，這表明使用 Firefox 時選擇不同的 JavaScript 庫會對性能有影響。

　　但是要記住，這些結論僅基于一個瀏覽器的結果。這是基于 Firefox 3.0.3 得出的結論?，F在我們進入下一小節，我將在不同的瀏覽器上運行該測試。

　　在不同瀏覽器上的JavaScript 性能

　　面對不同瀏覽器運行 JavaScript 會得出的不同結果(性能和時間都不同)，許多初級 Web 程序員覺得不可思議。盡管這對初級 Web 程序員而言是個挫折(他們擔心要編寫額外的代碼來處理不同的瀏覽器)，但是有經驗的 Web 程序員在 Netscape 和 Internet Explorer 的早期就知道如何處理該問題。這也是使用 JavaScript 庫的一個亮點，因為它們都謹慎處理許多或大部分瀏覽器差異。

　　JavaScript 速度差異的主要原因是每個瀏覽器都使用自己的 JavaScript 引擎。JavaScript 引擎是用于解析 JavaScript 并根據 Web 應用程序執行它的本機代碼。因此，JavaScript 的執行速度與底層引擎直接相關。在最近幾個月，許多瀏覽器公司越來越關注他們的瀏覽器的性能，這是有原因的。隨著某些頁面的 JavaScript 變得日益復雜，JavaScript 引擎的快慢能夠影響 Web 應用程序的響應速度。因此，當 Google 和 Firefox 等公司談論它們的 JavaScript 引擎時，它們就會談及下一代引擎的速度要快 10 倍。這對 Web 應用程序而言是很重要的，因為底層 JavaScript 引擎的速度直接導致更復雜的 Web 應用程序的出現。

　　現在，您知道 JavaScript 引擎是 JavaScript 執行速度的一個因素，那么讓我們在不同的瀏覽器上運行剛才在 Firefox 上運行的測試，并嘗試找出不同的引擎對 JavaScript 性能的影響。記住，這個測試與我前面在 Firefox 上運行的測試是一樣的，因此除了 JavaScript 引擎以外，其他所有東西都是相同的。圖 2 顯示了測試結果。

原文轉自：http://www.anti-gravitydesign.com