技巧 #2 - 提供盡可能多的搜索信息
jQuery 提供如此多的頁面元素搜索方法，有時您難以指出哪種方法是最好的。有一條經驗是不會錯的，即為搜索參數提供盡可能多的信息。因此，假如您正在搜索帶有 “clickable” CLASS 的所有頁面元素，如果您提前知道僅有 DIV 附帶有 CLASS，那么就能提高搜索性能。所以，搜索 “div.clickable” 會更加快。圖 6 顯示了支持該技巧的結果。
圖 6. 盡可能多地提供信息
考慮到底層 JavaScript 代碼之后，這就不足為奇了。通過提供元素標記，與 CLASS 參數匹配的搜索元素數量將大大減少，從而將搜索性能提升至與本例中的 ID 搜索相當。
開發人員在編寫 jQuery 選擇方法時不能偷懶，盡管 jQuery 的簡單讓人產生偷懶的欲望。簡單讓您放松了警惕。搜索機制變得如此簡單，讓我們傾向于僅輸入一條信息。然而，您應該總是盡可能多地輸入信息，尤其是已知信息。清單 2 顯示了一個很好的例子。
清單 2. 提供充足的信息
// Assume there are 50 of these in some giant form, and you need to validate // these fields before they are submitted, and there are hundreds of other // elements on the page as well // the "bad" way to validate these fields $(".notBlank").each(function(){ if ($(this).val()=="") $(this).addClass("error"); }); // the "good" way to validate these fields $("input.notBlank").each(function(){ if ($(this).val()=="") $(this).addClass("error"); }); // the "best" way to validate these fields $("input:text.notBlank").each(function(){ if ($(this).val()=="") $(this).addClass("error"); });
技巧 #3 - 緩存選擇器
最后一個性能技巧利用了幾乎所有 jQuery 選擇器都返回 jQuery 對象這個特性。這意味著在理想的情況下，您僅需要運行選擇器一次，并且能夠輕松地將所有函數連接在一起，或緩存結果供以后使用。您也不要擔心緩存，因為與總體可用內存相比，返回的對象是很小的。
清單 3 給出了一些關于如何利用緩存的例子。
清單 3. 緩存
在我的最后一個關于性能
// Imagine a function that hides all the div's with a class of "hideable" // when a button is pressed. These DIV's might reappear later when // working with the page, so the button can be pressed any number of // times, and the DIV's that have reappeared // will again be made to be hidden. $("#ourHideButton").click(function(){ $(".hideable").hide(); }); // As you saw in the CLASS versus ID example, though, a search for // CLASS is very inefficient // If this button is pressed often, it could lead to a slow response // Instead of the above example, you should write your code like this var hideable; $("#ourHideButton").click(function(){ if (hideable) hideable.hide(); else hideable = $(".hideable").hide(); }); // You can cache your search in a JavaScript variable and reuse it every time // the button is pressed. Because jQuery almost always returns the // jQuery object, you can save it the first time it is called for future use
的示例代碼中，將查看我在本系列的第一篇文章中提到的小部件(見 參考資料)。這個小部件是在表的左上角上的復選框，它允許您選擇或取消選擇該列上的所有復選框。這個小部件在電子郵件應用程序中非常常見，用于選擇或取消選擇所有消息。
清單 4. 性能改進
// Here is the code as I originally presented it in that article. Let's see // if we can improve the performance in any way from the things we learned here function selectAll() { var checked = $("#selectall").attr("checked"); $(".selectable").each(function(){ var subChecked = $(this).attr("checked"); if (subChecked != checked) $(this).click(); }); } // Here's the improved function. The search for the ID of "selectall" is // OK as-is, because we saw how fast the ID search is. // The search for the CLASS of "selectable" was not well-designed though, // because we saw a search by CLASS is very inefficient. // First step was improving the search by supplying as much information as we know. // We narrowed the search to only checkboxes with the CLASS of selectable. // This should improve our search // Further, we can cache this search because we will only need to perform it once // Finally, we can perform this search before the selectall checkbox is even // checked (when the page is finished loading), so that the search is completed // and cached before the user even uses it. // These 3 simple performance steps gave me a 200% increase in speed when tested // on a page with 200 rows of data. var selectable = $(":checkbox.selectable"); function selectAll() { var checked = $("#selectall").attr("checked"); selectable.each(function(){ var subChecked = $(this).attr("checked"); if (subChecked != checked) $(this).click(); }); }
關于性能的要點
使用 JavaScript 時，速度和性能絕對不是小問題。在現實中，創建 jQuery 的開發人員和處理瀏覽器內置 JavaScript 引擎的開發人員都非常關注性能問題。事實上，在最近 6 個月以來，瀏覽器開發的最重要問題就是 JavaScript 引擎的速度。瀏覽器開發者都致力于在下一年迅速提升 JavaScript 的執行性能，從而大大提高 jQuery 代碼和 JavaScript 引擎的速度。來自這些 “速度之戰” 的消息表明，提升 JavaScript 性能是大勢所趨。領導 jQuery 項目的 John Resig 一直都在談論他的最新 “Sizzle” 選擇引擎。他從頭編寫了一個選擇引擎，并聲稱初步結果表明它比 Firefox 要快 4 倍。這是巨大的速度提升!在我撰寫本文的最后部分時，jQuery 1.3 已經發布，并且包含了 Sizzle 選擇引擎。jQuery 聲稱，在所有瀏覽器上運行的總體結果表明選擇引擎的 1.3 版本比 1.2.6 版本的快 49%。此外，1.3 發布版在 HTML 注入(向 DOM 添加新的元素)上改進了 6 倍，在函數定位上改進了 3 倍。在我完成本文時，很多人都更新到了最新的 jQuery 發布版，這是非常令人激動的!
影響 JavaScript 性能的另一個因素是瀏覽器，如前所述，它的影響是所選的庫的 9 倍。Firefox 和 Chrome 在 “最快 JavaScript 引擎” 之戰中各有勝負，而 Safari 的參與讓競爭更加激烈。從我們上面的測試中，可以看到 Chrome 在 JavaScript 引擎性能方面遠遠超過 Firefox，但是 Firefox 3.1 將包含新的 Tracemonkey JavaScript 引擎，屆時其速度將比當前的 JavaScript 引擎 3.0 快 20 至 40 倍(這是他們聲稱的，不是我的觀點)，真不可思議!
在未來一兩年內，您將看到底層 JavaScript 引擎和 JavaScript 庫的速度得到巨大改進，從而導致使用 JavaScript 的 Web 應用程序將變得更加復雜。
如果您正在決定是使用 JavaScript 庫還是自己編寫 JavaScript，那么需要考慮的另一件事情是處理和調試 JavaScript 庫所需的全部工作。最近幾年以來，有數百位用戶一直在維護庫中的每一個函數。您可能要忙到深夜，甚至筋疲力盡地編寫自己的函數。您更相信誰呢?另外，即使您能編寫出比 jQuery 庫更快的代碼，您是否想過使用 jQuery 庫能夠獲得更多的優勢?您是否為了辛苦地編寫自己的代碼而放棄使用非常便利的 jQuery 及其函數庫?自己編寫代碼不僅需要大量時間，并且還會產生更多 bug，因此我還是建議使用現成的 jQuery 庫。
我最后討論的要點可能會讓一些人沮喪，但是我們必須考慮編寫這些 jQuery 庫的程序員。他們當中的一些是最棒的，并且他們編寫的超級優秀的代碼(一般人不能編寫這樣出色的代碼)都收入到這些庫中。我承認自己遠遠不如編寫 jQuery 庫的程序員。因此，為何不利用他們的智慧?
結束語
本文從總體上討論了 jQuery 和 JavaScript 庫的性能。通過對選擇方法進行大量的測試，您看到這些庫之間的速度存在巨大的差距，并且 jQuery 是最快的庫之一。不過，即使您選擇了最快的 JavaScript 庫，還是不能解決 Web 應用程序的性能問題，因為瀏覽器對性能的影響比庫強 9 倍。如果您能夠控制用戶使用特定的 Web 瀏覽器，那么就讓他們使用最快的瀏覽器。找到能夠最快地運行您的 Web 應用程序的瀏覽器，并讓用戶通過使用它從中受益。理想情況下，讓最慢的 JavaScript 瀏覽器消失意味著出現更快的 Web 應用程序。
我還提供了關于 jQuery 性能的 3 個技巧。盡管有好幾個站點都提供了關于 jQuery 性能的技巧，但是這 3 個技巧是最有效的。3 個技巧肯定比 50 個技巧容易記住，但其他技巧也是很好的，我將在 參考資料 部分指出另外一些技巧。不過，如果您在編寫代碼時記住了這 3 個技巧，將會獲得巨大的性能提升。應該永遠記住的 3 個 jQuery 技巧是：通過 ID 搜索比通過 CLASS 搜索快 100 倍，盡可能多地提供搜索信息，以及盡量緩存選擇。
最后，我們快速查看了 jQuery 和瀏覽器的 JavaScript 引擎即將推出的改進。在我撰寫本文的結尾部分時，jQuery 1.3 已經發布了，它承諾在選擇和代碼的其他方面實現跳躍式性能改進。此外，Firefox 還承諾它的下一代 JavaScript 引擎會快 20 至 40 倍!這些跡象表明，在未來的一兩年內，JavaScript 環境會在性能上取得重大突破。在不久的將來，復雜的 Web 應用程序會日益流行，因為快速運行這些程序的條件已經成熟。
在本文結束時，我們應該回過頭來重新檢驗這句話 “jQuery 在簡單的頁面上無可挑剔，但在復雜的頁面上性能極其低下。在解決性能問題之前，您必須對復雜頁面使用常規的 JavaScript�！备鶕业慕涷�，jQuery 的 “性能問題” 一樣出現在 “常規的 JavaScript” 中。事實上，真正影響性能的不是 jQuery 或 JavaScript，而是瀏覽器。因此我同意這樣的觀點：使用設計不良的 jQuery 代碼的復雜頁面運行在 IE6 上時會導致糟糕的性能。不過，我希望您已經了解我要闡述的思想：只要擁有良好的 jQuery 代碼、運用 3 個最重要的技巧并選擇最快的瀏覽器，那么即使運行最復雜的頁面也不會出現明顯的性能問題。
文章來源于領測軟件測試網 http://www.kjueaiud.com/
