在 web 早期，優化 web 頁面的性能通常意味著避免了使用不必要的 HTML 標記，將 JavaScript 代碼量控制到最小，并盡量減小所有圖片文件大小，否則上網沖浪者會走開去泡杯咖啡來等待頁面加載。
web 各個方面的改進也意味著我們現在面臨新的性能考慮。盡管 DSL 和寬帶為很多人提供了對 Internet 上更多內容的高速訪問，我們對加載時間和響應的期望也在發展，希望在頁面上執行操作后能立刻得到結果。Asynchronous JavaScript and XML (Ajax) 的出現讓開發人員能在 web 應用程序中提供像桌面程序一樣的體驗，不再需要響應事件前加載整個頁面。其優勢非常明顯，但這也讓普通的 web 用戶希望在所有 web 應用程序中獲得這樣的響應。隨著近期移動 web 的興起，出現了新的挑戰，滿足現代 web 用戶的期望，在有著更小屏幕、更低電量、更慢網速的目標設備上實現這些效果。
本文重點是告訴您在最大限度利用 JavaScript 和 Ajax web 應用程序時應考慮的問題。本文提供了以最佳方式處理代碼的指導原則，無論是新應用程序還是已有程序中的。您還將了解各種工具和技術，用來測量應用程序的性能。最后，您將了解一些無需更改現有代碼就可提升性能的方法。
JavaScript 開發的問題之一就是大部分編寫 JavaScript 的開發人員和 web 設計師并未從基礎學習 JavaScript。關于此語言的知識是長期通過添加執行某一特定功能的代碼片段積攢起來的。他們通常知道如何聲明變量、編寫條件語句、執行運算，但他們從未靜下心來全面系統地從頭學起。現在，這些問題依然存在，而開發人員也急于使用庫和框架（如 jQuery 和 YUI）來使開發變得更為容易。
使用 JavaScript 庫其實也沒有錯（實際上，我也是其忠實粉絲）。在現代的開發人員中有這樣一種趨勢，是成為所選擇的 JavaScript 框架的專家，而不是 JavaScript 本身的專家。這樣帶來的問題是，您會發現這些開發人員使用的是效率低下的編程實踐，有時候做一件事時，使用普通的原始的 JavaScript 都會比使用某個框架特性要快得多。
這一章中，您將會了解一些 JavaScript 和 Ajax 開發最佳實踐，特別是容易被非 JavaScript 開發人員忽略的方面。
最大化 JavaScript 應用程序的金科玉律是盡可能使用外部 JavaScript 文件，而不是直接將 JavaScript 代碼包含在 HTML 文件中。這么做不僅僅意味著不用在多個文件之間復制 JavaScript 代碼，而且 JavaScript 代碼會被 web 瀏覽器緩存，不必在每個子頁面加載時重復加載一遍。第一個頁面加載時特別慢，因為外部文件需要發送額外的 HTTP 請求到服務器。盡管如此，大多數應用程序中，第一次加載損失的性能遠比子頁面加載節省下的性能小得多。
有個例外情況是大多數的訪問者只訪問一個頁面。這里最好使用內聯 JavaScript；或者還有一種情況，就是您希望第一個頁面與子頁面加載一樣快，或者比子頁面更快。在 High Performance Web Sites （見 參考資料 中的鏈接）一書中，Steve Sounders 提出 Post-Onload Download 的概念，即將第一頁的 JavaScript 代碼放在其 HTML 文件中，然后在子頁面完全加載后動態加載所需的外部 JavaScript 文件。盡管如此，大多數情況下，簡單使用外部 JavaScript 文件已經足夠。
我完全支持使用 JavaScript 框架和庫。它們不僅能解決很多跨瀏覽器兼容性問題，而且，如果使用合適，可大大提高 web 應用程序開發速度。有這樣的說法，使用這些工具要特別注意，因為它們其中多數都非常龐大，可能降低應用程序性能。
您要問自己的第一件事是：我確實需要使用框架嗎？我初次接觸 JavaScript 框架是在幾年前，那時我需要在我開發的 web 應用程序中使用 Ajax。我沒有自己編寫
XMLHttpRequest
函數，而是決定使用 Prototype 框架使開發更容易。程序只用到框架的執行 Ajax 請求和處理服務器響應的功能，但我還是決定使用。幸運的是，我開發的應用程序相對較小，只在內部使用，性能不是很重要，但幾年之后，我逐漸知道最好還是使用只提供 Ajax 功能的更輕量級的解決方案。
Prototype 框架最新的未精簡未壓縮版本，是 141KB。而與我的應用程序相關的代碼部分不到 2KB，剩下 139KB JavaScript 代碼對我的應用程序毫無用處。這不僅增加由文件大小造成的加載時間，還增加了在瀏覽器中執行 JavaScript 代碼的執行時間。
概括來說，現代 JavaScript 框架和庫，如 Prototype、jQuery、Dojo、MooTools、YUI、ExtJS 等等，包含一大堆您可能用到或用不到的特性。如果您只用到其中一小部分，您最好尋求更輕量級的解決方案。例如，YUI 庫，可讓您默認加載最小的空的框架，然后由您選擇在此基礎上加載哪些庫。
當您閱讀 HTML 書籍時，它很可能建議您將 <script> 標記放在頁面的 <head> 元素內部。如果這就是您目前對 <script> 標記放置的認識，趕緊把它忘了吧！將 <script> 標記放在 HTML 頁面頂部將會使頁面直到 JavaScript 代碼完全加載和執行后才能呈現。如果將它們放在 <head> 標記內部，只有到腳本加載并執行后，頁面主體才會呈現，從而讓用戶覺得頁面加載很慢。
為了最優化頁面的性能，應該將 JavaScript 代碼放在頁面底部，如果可能，就在 </body> 標記之前。這樣，web 頁面其他部分（HTML、CSS、圖片、Flash 內容等等）將會在腳本加載和執行前下載，從而會讓用戶覺得加載要快一些。
如果您的 web 頁面或應用程序需要很多 JavaScript，將所有代碼放在一個單獨文件中可能會造成下載和執行時長時間等待。這些情況下，最好將 JavaScript 代碼分別放到多個文件中，當頁面加載完成后在需要時動態加載。LazyLoad JavaScript 庫旨在提供動態腳本加載，并考慮到有關腳本執行順序在跨瀏覽器時的不一致性。更多關于 LazyLoad 庫的信息，見 參考資料 。
Ajax 請求徹底改變了傳統 web 應用程序的樣子，它讓 JavaScript 開發人員能創建高度動態化、交互性強、響應迅速的應用程序，就像在桌面應用程序中體驗到的那樣。結果，在現代的 web 應用程序中，Ajax 請求隨處可見。有時候很容易忘記這點，盡管用戶看不到頁面加載，但 Ajax 請求執行的是完整的 HTTP 請求，它與常規頁面加載一樣。因此，應該多加關注，減少所使用的 Ajax 請求的數量。
這方面的一個例子是搜索結果分頁。我經常看到在應用程序中，用一個 Ajax 請求以 JSON 數組形式返回搜索結果，再用一個請求返回數據庫中結果條數，用于分頁邏輯。 清單 1 和 顯示的是這兩個請求的基本樣例（使用 Prototype 框架）。
var url = "get_data.php";
var options = {
method: "post",
parameters: {"page":1,"rows":5},
onSuccess: firstCallbackFunction,
onFailure: firstCallbackFunction
}
new Ajax.Request(url, options);
清單 2 顯示的是第二個獲取總記錄數的請求。
var url = "get_count.php";
var options = {
method: "post",
parameters: {},
onSuccess: secondCallbackFunction,
onFailure: secondCallbackFunction
}
new Ajax.Request(url, options);
清單 3 和 清單 4 顯示的是對應的 JSON 格式的 HTTP 請求。
{
"records": [
{"id":1,"name":"John","email":"john@example.com"},
{"id":2,"name":"Mary","email":"mary@example.com"},
{"id":3,"name":"Tony","email":"tony@example.com"},
{"id":4,"name":"Emma","email":"emma@example.com"},
{"id":5,"name":"Alan","email":"alan@example.com"}
]
}
清單 4 顯示的是報告總記錄數的響應。
{"total_records": 95}
將這兩個 Ajax 請求分開是浪費資源，它們可以合并到一個請求中，并生成以下 清單 5 的響應。
{
"total_records": 95,
"records": [
{"id":1,"name":"John","email":"john@example.com"},
{"id":2,"name":"Mary","email":"mary@example.com"},
{"id":3,"name":"Tony","email":"tony@example.com"},
{"id":4,"name":"Emma","email":"emma@example.com"},
{"id":5,"name":"Alan","email":"alan@example.com"}
]
}
這樣做不僅使所需的 HTTP 請求和響應更少，而且也減少了用于響應 Ajax 請求的服務器端腳本。
本例演示非常簡單 — 應用程序越復雜，減少所用的 Ajax 請求數量就越重要。
為了盡量減少代碼行，很多開發人員常忽略了變量的使用，很多情況下他們其實能顯著提高某段代碼的執行速度。例如，在以下代碼中，對一個元素應用了多種樣式：
document.getElementById("myField").style.backgroundColor = "#CCC";
document.getElementById("myField").style.color = "#FF0000";
document.getElementById("myField").style.fontWeight = "bold";
以上每行代碼中，瀏覽器都要在 DOM 中搜索 ID 為
myField
的元素。其實無需像這樣執行三次，可以通過將
document.getElementById("myField")
結果賦給一個變量并在每行使用變量來提高效率。如
清單 7
所示。
var myField = document.getElementById("myField");
myField.style.backgroundColor = "#CCC";
myField.style.color = "#FF0000";
myField.style.fontWeight = "bold";
另一個應該用變量而沒有用的地方是遍歷數組的
for
循環。請看
清單 8
的例子。
for(var i=0; i < myArray.length; i++) {
//do something
}
這段代碼效率很低，因為每次循環迭代時都要計算
myArray
數組的長度。這對小數組無關痛癢，但對大數組影響巨大。提高循環性能的方法很簡單，甚至不需多加一行代碼（見
清單 9
）。
for(var i=0, arrayLength=myArray.length; i < arrayLength; i++) {
//do something
}
清單 9 中，我們把對
myArray.length
的引用移到了語句的初始化部分，將其賦給了一個變量。這樣，它只在循環第一個迭代時執行，從而在以后每次迭代時節省了寶貴的時間。
完全遍歷和操作 DOM 會給 web 應用程序造成很大性能負擔。問題是，與 DOM 的交互必不可少，能給應用程序帶來快速響應和豐富接口。DOM 操作的一個特別問題是瀏覽器需要在屏幕上回流和重繪（主要是重新呈現）元素。因此，減少代碼中回流和重繪的次數就尤為重要。
再看看前面
清單 7
中的例子，我們用一個 ID 為
myField
的元素，對其應用三個不同的樣式屬性。這將導致三次獨立的回流（re-flow）和重繪（re-paint），效率很低，因此我們可以做些小更改。這些語句效率低下，可以考慮將這些操作合并成一句。
清單 10
顯示的是效率更高的樣例。
var myField = document.getElementById("myField");
myField.style.cssText = "background-color: #CCC; color: #FF0000; font-weight: bold";
通過將樣式修改合并起來，結果是只有一次回流和重繪，而且，響應速度和性能也得到提升。
本章包含了可在應用程序中發揮最佳性能的 JavaScript 和 Ajax 開發最佳實踐。遺漏在所難免。請查閱 參考資料 ，其中提供了重點介紹高性能 JavaScript 最佳實踐的優秀文章、教程、書籍的鏈接。
當談到測量 web 應用程序的性能，有一系列的工具可用于在 web 瀏覽器內部分析應用程序的速度和加載時間。這些工具一般是預先設置一段 JavaScript 代碼來計算執行時間。還提供了分析頁面加載產生的網絡流量的方法，其中有產生的 HPPT 請求數量、加載的靜態資源（圖像、外部樣式表、JavaScript 文件）的大小，等等。
這一章中，您將了解各種工具，可根據具體情況預先設置并分析 JavaScript 應用程序中的網絡活動。
Firebug 是 Mozilla? Firefox? 的瀏覽器擴展，它為 web 開發人員提供了大量功能。這些功能包括 JavaScript 控制端、DOM 操作和選擇、腳本調試、DOM 源瀏覽、分析、網絡分析，等等。
要執行 Firebug 中的 JavaScript 分析，導航到 Console 選項卡，單擊 Profile 按鈕。現在可以與頁面中各種啟用 JavaScript/Ajax 的特性交互，Firebug 將計時。Firebug 還提供控制端 API 與分析器交互。 圖 1 顯示的是 Firebug 分析器生成的報告樣例屏幕截圖。
圖 1. Firebug 分析器報告樣例
要使用 Firebug 的網絡分析工具，只要單擊 Net 選項卡。將會顯示所有生成的 HTTP 請求、響應代碼和接收的消息、接收來源域、文件大小、發送時間點。還可以深入這些請求，查看發送的 HTTP 頭部、接收到的響應、所用文件相關緩存信息。 圖 2 顯示的是 Firebug 關于網絡流量輸出報告的樣例。
圖 2. Firebug Net 面板報告樣例
Safari Web Inspector 和 Chrome Developer Tools
Safari? Web Inspector 和 Chrome? Developer Tools 提供了與 Firebug 相似的功能，他們看上去更漂亮。在 Safari 中，進入工具欄的 Develop 菜單（需要在 Safari 參數中啟用）并選擇 Show Web Inspector ，打開 Web Inspector。單擊檢查器窗口頂部的 Profile 選項卡，點擊底部左側的圓形記錄圖標來啟動分析。再次單擊圖標，以停止分析并生成報告。 圖 3 顯示了報告樣例。
圖 3. Safari Web Inspector 分析器報告樣例
要分析應用程序的加載時間和 HTTP 請求，單擊 Inspector 窗口頂部的 Resources 按鈕。然后您可以選擇查看所使用的網絡資源的時間和大小的圖片。 圖 4 中顯示的是漂亮的輸出結果樣例。
圖 4. Safari Web Inspector 資源報告樣例
Google Chrome 的 Developer Tools 與 Safari 一樣（都是基于瀏覽器的 WebKit），可以在在 Developer 菜單中看到 Developer Tools。
Internet Explorer Developer Tools
Internet Explorer? 8 也有一組 Developer Tools。單擊 F12 啟動 Developer Tools 窗口。Internet Explorer 的工具提供一組與 Firebug 相似的特性，而它提供了一個更強大的測試 JavaScript 函數性能的分析器。在 Developer Tools 中，單擊 Profiler 選項卡并單擊 Start Profiling 按鈕開始分析應用程序。讓應用程序執行想要測試的函數然后單擊 Stop Profiling 生成報告。生成報告應與 圖 5 類似。
圖 5. Internet Explorer Developer Tools 分析器報告樣例
不巧的是，Internet Explorer 的 Developer Tools 不包含網絡分析器。如果您想要用 Internet Explorer 分析應用程序的網絡流量，可以使用 Fiddler 工具。它可用于發出 HTTP 請求的所有應用程序，包括 Internet Explorer。想要了解更多關于 Fiddler 的信息，見 參考資料 。
YUI Profiler 是用 JavaScript 編寫的代碼分析器。與包含在 web 瀏覽器中的分析器工具（或者是像 Firebug 一樣的瀏覽器擴展）不同，YUI 分析器不可見，而且必須包含在 web 頁面中。使用它的好處是可以明確定位到應用程序中需要分析的部分（而不只是執行的函數）。YUI Profiler 可以注冊要測量的函數、類構造函數和對象。您可以使用分析器生成結果報告，它提供了一個過濾函數，可以精確定位到您希望測量的目標區域。配置文件報告是 JSON 格式的，可以輕松將其導入您自己的應用程序中，然后您可以生成表形和基于圖表的數據視圖。
YUI Profiler 一個主要優點是它不針對某個特定瀏覽器。它甚至可在有 A 級瀏覽器的移動設備上運行，例如 Apple? iPhone?、Android? 設備及 Nokia? N95 上的基于 WebKit 的瀏覽器。
更多關于 YUI Profiler 的信息，見 參考資料 。
YSlow 是添加到 Firebug 擴展中的 Firefox 擴展，提供對 web 頁面加載和執行的計分功能。它提供對 JavaScript 和 web 頁面性能各方面的總體分級和詳細分析。在我的測試中，我在發出 91 個 HTTP 請求的頁面中運行 YSlow，評級為 C 。它給出一個有用的提示，頁面有 10 個外部 JavaScript 腳本，建議我將其合并成一個。
評級的其他部分還包括添加超期頭部、使用 gzip、將 JavaScript 放在頁面底部、減少 JavaScript 和 CSS、刪除重復的 JavaScript 和 CSS 代碼，等等。 圖 6 顯示的是 YSlow 輸出樣例。
圖 6. YSlow 報告樣例
現在您已測量了應用程序的性能，并決定了讓性能顯著提升，您可能在考慮深入探究并修改程序代碼。是的，某些方面需要這么做，不過還有一些方法可以在完全不改變應用程序代碼的情況下提升 JavaScript 和 Ajax 性能。
如果是一個大型的 JavaScript 應用程序，可能會向頁面中加載多個外部 JavaScript 源文件，以提供各種功能。也許您正使用像 jQuery 這樣的框架，并加入了提供各種額外特性的插件。很可能還有您自己的應用程序底層 JavaScript 代碼，這將程序分割成多個文件。
盡管將 JavaScript 分成幾個文件有其優勢，但卻對性能有嚴重影響。對于加載到 web 應用程序中的每個外部 JavaScript 文件，都要執行 HTTP 請求，這極大增加了腳本的加載和運行時間。為了減少請求數，強烈建議您盡可能合并 JavaScript 源文件。尤其是，如果一個插件只用于一個頁面，就不要將它放在單獨文件中。實際上，是否應該將其作為內聯腳本，還有爭論，這取決與它是否會被其他頁面使用。也不能絕對地將所有東西都放入一個文件中，不過應用程序發出的 HTTP 請求數越少，應用程序加載越快。
好的編程實踐指導原則講到，編寫應用程序代碼時，應當遵循一致的風格，這對 JavaScript 和其他任何語言都適用。問題是，加入的所有空格、分行符、注釋都增加了腳本文件大小和應用程序的加載時間。
為了降低 JavaScript 文件大小，強烈建議您在將文件放入產品環境前 縮減 文件大小。縮減一般包括取出代碼額外內容以獲得緊湊和更小的文件。對潛在節約舉例說明，單縮減本身就使最新版本從編寫時的 155KB 減小到 70.6KB。節省了約 55%。
當然，建議您縮減源代碼是沒什么問題，但您會怎么做呢？聰明的人是不會手工縮減代碼的，幸運的是，有很多工具能幫您完成這項工作。其中一些流行的工具有 Douglas Crockford 的 JSMIN、Dean Edwards 的 Packer，以及 Dojo 工具中的壓縮器。我個人最喜歡的是 Yahoo!? Inc 的 YUI Compressor。關于這些工具的更多信息，見 參考資料 。
在前一章中，您了解到可以通過縮減 JavaScript 源文件來顯著減小其大小。實際上，可以通過使用 gzip 壓縮這些文件來進一步減小其大小。最好的方法是讓服務器將 JavaScript 文件發送到客戶端之前就用 gip 壓縮。如果您正使用 Apache 2（包含 mod_deflate）并且 JavaScript 文件存儲在同一文件夾下，那就可以在 JavaScript 文件所在位置簡單地創建一個 htaccess 文件。該文件的內容很簡單：
SetOutputFilter DEFLATE
。
壓縮 JavaScript 文件節約顯著。在前一章中，您了解到縮減 jQuery 源代碼讓文件大小從 155KB 陡降到 70.6KB（減小 55%）。如果對縮減的文件再用 gzip 壓縮，文件進一步減小到 24KB。通過縮減和壓縮，文件大小總共減少約 85%。結果根據您的代碼而不同，但節約是顯著的。
讓 web 瀏覽器正確緩存內容很重要。例如，如果您正使用 Apache（包含
mod_expires
），并且想要客戶端將 JavaScript 文件緩存兩天，您可以將
清單 11
中的指令添加到 .htaccess 文件中保存 JavaScript 文件的位置（假設有一個文件專門保存 JavaScript 文件；如果沒有，就需要在 Apache 配置文件中設置）。
ExpiresActive on
ExpiresDefault "access plus 2 days"
當然，緩存 JavaScript 文件的問題是，如果進行更改，則使用緩存版本的用戶在超時期限內再次訪問將使用緩存的版本，而非更新后的版本。幸運的是，您可以通過向加載腳本的 <script> 標記中添加帶版本號的查詢語句來強制用戶獲取最新版本。該查詢語句對 JavaScript 代碼沒有影響，但對于瀏覽器而言，這是個完全獨立的文件，并會下載新版本。當然，每次更改文件后就增加版本號很重要。在大型應用程序中，應建立自動處理此過程的腳本，以防此類問題發生。
本文中，您了解到 JavaScript 和 Ajax 性能在現代網站和應用程序中的重要性。首先，您了解好的 JavaScript 編程事件如何對應用程序的響應和加載時間做出巨大改變。然后，您了解到如何通過使用分析和網絡分析工具測量現有應用程序的性能。最后，您了解到如何通過使用一些簡單但強大的技術減小文件大小和應用程序發出的 HTTP 請求數來加速現有應用程序，而無需修改應用程序源代碼。
轉載自： http://www.ibm.com/developerworks/cn/web/wa-aj-jsajaxperf/index.html#resources
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
