您應該注意到，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 庫最快，但它最終的影響卻是很小的!對于性能而言，瀏覽器的影響比庫本身要大得多�；仡櫼幌聢D 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 應用程序。
jQuery 性能調優
本文的第二部分將討論如何改進 jQuery 代碼的性能。前一部分表明選擇 jQuery 作為 JavaScript 庫指向了正確的性能方向。如果您正在閱讀本文，您可能已經使用了 jQuery。但是底層庫速度快并不意味著您編寫的所有代碼都是高質量的。如果您沒有回過頭來想想應該怎么做，使用 jQuery 仍然會編寫出非常慢的代碼。
這個部分介紹一些性能調優知識，以及改進 jQuery 代碼速度的最佳實踐技巧。
技巧 #1 - 盡可能多地通過 ID 進行搜索，而不是 CLASS
在 jQuery 代碼中兩種常見的搜索技術是通過元素的 ID 進行搜索和通過元素的 CLASS 進行搜索。在使用常規 JavaScript 的 JavaScript 庫之前，通過 ID 查找頁面元素還是相當簡單的�？梢允褂� getElementById() 方法快速找到元素。但是如果沒有 JavaScript 庫，要查找 CLASS 會更加困難，在必要情況下，我們還通過在其 ID 中進行編碼幫助查找。使用 jQuery 時，搜索 CLASS 就像搜索頁面上的 ID 一樣簡單，因此這兩個搜索似乎是可互換的。然而實際情況并非如此。通過 ID 搜索比通過 CLASS 搜索要快得多。當通過 ID 進行搜索時，jQuery 實際上僅使用內置的 getElementById() 方法，但通過 CLASS 進行搜索時必須遍歷頁面上的所有元素，以查找匹配項。很明顯，當頁面越大并且越復雜時，通過 CLASS 進行搜索會導致響應非常慢，而通過 ID 進行搜索不會隨著頁面變大而變慢。
前面運行的 jQuery 性能測試結果支持這一數據。讓我們查看每個測試，看看需要注意 jQuery 代碼的什么地方。在這個例子中，分別看看通過 ID 和 CLASS 進行搜索時的測試結果(圖 5)。
圖 5. ID 搜索和 CLASS 搜索對比
這些測試是不同的，但它們得出的數據表明通過 ID 進行搜索比通過 CLASS 進行搜索快得多。這如何影響到 jQuery 代碼?在編寫搜索時，您要記住這些技巧：如果既可選擇 CLASS 又可選擇 ID，那么通常要選擇 ID。如果需要在您的代碼中搜索某些元素，一定要給它們分配 ID。
清單 1 顯示了一個實際的 jQuery 測試，您可以在您的機器上運行它對此進行驗證：
清單 1. CLASS 和 ID
$(document).ready(function() { console.info("Start Test"); var d = new Date(); console.info(d.getSeconds() + " " + d.getMilliseconds()); var testBody = ""; for (var i=0; i<1000; i++) { testBody += "
"; } $("body").append(testBody); for (var i=0; i<1000; i++) { $(".testable"+i); } var d = new Date(); console.info(d.getSeconds() + " " + d.getMilliseconds()); console.time("Start ID Test"); testBody = ""; for (var i=0; i<1000; i++) { testBody += "
"; } $("body").append(testBody); for (var i=0; i<1000; i++) { $("#testable"+i); } var d = new Date(); console.info(d.getSeconds() + " " + d.getMilliseconds()); console.info("End Test"); });
ID 測試耗時 218 毫秒，而 CLASS 測試耗時 19.9 秒!甚至在專門為該測試構建的簡單頁面上，ID 搜索也要比 CLASS 搜索快 100 倍!
文章來源于領測軟件測試網 http://www.kjueaiud.com/
