首先一起來做個創建性能測試
關於性能測試的第一步是創建一個合適的性能測試。jQuery 以及其他 JavaScript 庫在代碼中扮演的最重要角色就是使用選擇查找特定頁面元素。我在最初的性能測試中就以這方面爲重點。一個良好的性能測試應該真正地發揮 JavaScript 庫的全部力量，用包含數千個頁面元素的頁面測試它。應該運行所有選擇方法，讓我看到哪個選擇方法最快，哪個最慢。測試應該事先知道正確的答案，從而確定 JavaScript 庫是否正確地執行選擇方法。最後，應該顯示所有結果，並附帶所用的運行時間，讓我能夠在所有庫之間進行比較。
我差點忽略了性能測試的最重要方面：它應該是免費的。畢竟這個系列文章的不成文規則就是相互利用彼此的成果，因此我繼續發揚這種精神，在此使用一個現成的 JavaScript 庫性能測試。這個測試稱爲 SlickSpeed Selectors Test，它非常適合我的需求。它將 jQuery 1.2.6（撰寫本文時的最新版本）與其他 4 個流行的 JavaScript 庫（MooTools、Prototype、YUI 和 Dojo）進行比較。然後，它使用帶有數千個頁面元素的頁面運行 40 個選擇測試。換句話說，這是我所希望的最佳性能測試。我將在第一個性能測試分析中使用該測試。
對於第一個性能測試，我使用的運行環境是 2.2 GHz 處理器、2 GB RAM 和 Firefox 3.0.3（非常重要）。我在該配置下運行 5 次測試，圖 1 顯示了 5 次運行的平均結果。
從第一次測試能夠得出什麼結論？現在我們僅關注總體結果，而不是每次測試。在獲得一些總體結論之後，我將稍後在本文中關注每個測試。
結論 1：YUI 慢到了極點！
對，與其他庫相比，YUI 真的很慢。仔細查看每個測試，找出爲什麼這個庫在選擇元素組（例如 “p, a”）時非常慢。對於要求具有很好性能的頁面而言，這個庫是最差的選擇。
結論 2：Mootools、jQuery 和 Dojo 的運行時間幾乎一樣。
與其他兩個庫相比，這 3 個庫是非常快的，並且 Dojo 是它們當中最快的，而 jQuery 是最慢的。但是從全局考慮，它們之間的速度是很接近的。
結論 3：這些庫之間的相對差別還是比較明顯的。
度量最快時間/最慢時間以確定速度的相對差別，您可以看到相對差別爲 332%。這個差別是比較大的，這表明使用 Firefox 時選擇不同的 JavaScript 庫會對性能有影響。
但是要記住，這些結論僅基於一個瀏覽器的結果。這是基於 Firefox 3.0.3 得出的結論。現在我們進入下一小節，我將在不同的瀏覽器上運行該測試。
在不同瀏覽器上的 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 顯示了測試結果。
看完這些測試結果之後，您首先注意到的是在這些瀏覽器中運行得到的時間差很大。在 Chrome 1.0 上運行 jQuery 需要 168 毫秒，而在 IE6 上運行需要 1728 秒。這是難以置信的時間差！jQuery 選擇方法在 IE6 上運行比在 Chrome 上運行慢 10 倍！現在，您知道爲什麼 Google 喜歡誇耀它的 JavaScript 引擎，以及爲什麼某些瀏覽器很少介紹自己的 JavaScript 引擎。這些差別還是比較大的。
您應該注意到，jQuery 在 Firefox 或一些其他瀏覽器上運行時速度排在第 3 位，而在另一些瀏覽器上排在第 1 位。事實上，這些結果表明，根據性能進行分類的話，這些庫可以分爲兩組，而不管使用什麼瀏覽器。Mootools、Dojo 和 jQuery 通常屬於一個組別，而 Prototype 和 YUI 屬於另一個組別，前一組要比後一組快得多。
我覺得所有這些結論都需要專門花一個小節進行闡述，因爲它們對 JavaScript 開發人員非常重要。我仍然嘗試總結上面的性能結果，並且沒有忘記本文是以 jQuery 爲主題的。
結論 1：Mootools、jQuery 和 Dojo 在性能方面不分上下。
查看它們在所有 5 個瀏覽器上進行的測試，在求取平均值之後，您可以看到這 3 個庫的性能幾乎是一樣的。（理想情況下，我們應該調查每個瀏覽器的市場份額。但是調整這些數字很難，因爲使用 JavaScript 庫的站點不一定由 “平均用戶” 訪問）。
圖 3. 測試結果的平均值（Mootools、jQuery 和 Dojo）
結論 2：Prototype 和 YUI 的性能很慢。
看看這兩個庫在 5 個瀏覽器中的測試結果與 jQuery 的對比。在求取它們的平均值之後，您可以發現這兩個庫的性能差別有多大。它們在任意瀏覽器中平均比 jQuery 慢 300%。
圖 4. 測試結果的平均值（jQuery、Prototype 和 YUI）
結論 3：如果對性能要求比較高時，選擇 Mootools、jQuery 和 Dojo 之一獲得的性能幾乎一樣。
根據以上的平均值，選擇這 3 個庫之一比選擇另外兩個庫之一能夠獲得更多的性能優勢。從在所有瀏覽器上運行得出的平均值看，它們的性能是相當的。因此，當您選擇 JavaScript 庫時，選擇這 3 個庫之一是不會錯的。
結論 4：如果對性能要求比較高時，不要選擇 Prototype 或 YUI。
如果要求 JavaScript 庫具有較高的性能，或者打算創建一個大型的 JavaScript 項目，那麼就不應該選擇這兩個庫之一。這兩個庫的性能要比其他庫遜色得多。
結論 5：瀏覽器對性能的影響是 JavaScript 庫的 9 倍。
我認爲這是本文所有結論中最重要的結論。您可以在特定情況下討論哪個 JavaScript 庫最快，但它最終的影響卻是很小的！對於性能而言，瀏覽器的影響比庫本身要大得多。回顧一下圖 3 和圖 4 的平均值，您可以看到 3 個最快的庫中，最慢那個（Dojo）僅比最快那個（jQuery）慢 15%。只有 15%！然而，您看看 jQuery 在最快的瀏覽器（Chrome 1.0）和最慢的瀏覽器（IE6）上運行的速度差別，這個差別竟然達到 1000%！從這兩個數字看，15% 對 1000% 而言是微不足道的。至此，關於
3 個較快的庫中哪個是最快的爭論可以停止了，因爲它們對最終結果的影響是微乎其微的。
結論 6：如果 JavaScript 性能對 Web 應用程序很重要，並且您可以控制選擇什麼瀏覽器，那麼就選擇最快的瀏覽器！
在某些情況下，您可以控制使用什麼瀏覽器訪問站點。如果能夠控制使用什麼瀏覽器，那麼您就是很幸運的。我就碰到這樣幸運的項目。在這種情況下，如果您擁有一個複雜的 JavaScript 應用程序，或者您認爲性能很重要，那麼您就應該控制用戶用於訪問 Web 應用程序的瀏覽器。這些測試已經清楚地顯示了瀏覽器的影響。如果您的 JavaScript 應用程序的訪問量很大，那麼您可以告訴用戶，他們必須 使用 Chrome。
結論 7：如果您不能控制用戶使用的瀏覽器，那麼要首先考慮在 IE6 上的性能。
但是，在大部分情況下，我們都無法控制用戶使用什麼瀏覽器訪問我們的站點。不過，很大一部分用戶都使用 IE 6 瀏覽網頁。到目前爲止的測試中，這個瀏覽器的 JavaScript 引擎是最慢的。但是由於仍然有大量用戶使用它，並且良好的 Web 設計需要 “適應最糟糕的情況”，這意味着您可以考慮根據 IE6 設計您的 JavaScript 應用程序。