提升Web應用程序性能的最佳實踐
作為開發人員，Web頁面加載或刷新的速度對其網站至關重要。在瀏覽器中調整性能問題比在Java應用程序中更難。開發人員在各種瀏覽器中調試JavaScript的方法要少得多。比如，在Mozilla Firefox中，可以使用Firebug調試JavaScript，但仍然不能調整很多性能問題，如瀏覽器呈現消耗時間。為了解決這些問題，有必要開發瀏覽器插件來監控時間響應，以及確定其他對應解決方案如部分呈現或延時加載。
51CTO推薦專題：高性能WEB開發應用指南
本文節選自IBM developerWorks 提升Web應用程序的性能的系列文章，該文通過Web應用程序性能的***實踐案例，幫助開發者更好地理解影響Web應用程序性能的因素，學習如何診斷Web應用程序中的性能問題，找到客戶端內容中的瓶頸，并確定解決方案。
一、提升Web應用程序性能的6種基本方式
1.減少HTTP請求數
每個HTTP請求都有開銷，包括查找DNS、創建連接及等待響應，因此削減不必要的請求數可減少不必要的開銷。要減少請求數：
◆ 合并文件。將總是同時使用的腳本合并到同一個文件中，不會減小總大小，但將會減少請求數。還可以同樣方法合并CSS文件和圖片。可以實現文件自動合并：
◆ 在構建階段。用
◆ 在運行時階段。啟用mod_concat模塊。如果httpServer是Apache，用pack:Tag作為JSP標簽庫來合并JavaScript和樣式表文件。(pack:Tag是一個JSP-Taglib，可縮減、壓縮及合并資源，如JavaScript和CSS，并將它們在內容或普通文件中緩存。)
◆ 使用CSS Sprites。將背景圖片合并成一個圖片，并使用CSS background-image和background-position屬性來顯示所需圖片部分。還可使用內聯圖片減少請求數。
2.后置加載組件
只呈現需要的組件;其余可等待。***不要一次呈現太多組件。
某些情況下，可使用后置加載。由于瀏覽器可視區域外的組件可以后置加載，當這些組建進入可視區域不久后，初始呈現就會失效。
有些JavaScript可以在onload事件后后置加載，如JavaScript中初始呈現后拖動某個元素。
3.前置加載組件
通過前置加載組件，可以利用瀏覽器的空閑時間請求將來會用到的組件(如圖像、樣式和腳本)。當用戶訪問下個頁面時，如果大多數組件都已在緩存中加載，那頁面加載會快得多。
有兩種前置加載：
無條件：一旦觸發onload，就取得一些額外組件。
有條件：根據用戶的動作，推測用戶下一步的方向并進行相應的前置加載。
4.將腳本放在底部
腳本可能會產生問題，因為它們可能會阻礙并行下載。當下載腳本時，瀏覽器不會再啟動其他下載，即使那些位于不同主機。將腳本，如樣式表，放在底部，以保證它們在其他下載完成后再下載。
也可以使用延時腳本，這只有Internet Explorer支持。DEFER屬性表示腳本不含document.write()。這就告訴瀏覽器他們可以持續呈現。
5.使用無cookie域組件
當瀏覽器發出對靜態圖片的請求，并隨之發送cookie時，服務器不會使用那些cookie。由于這些cookie只會造成不必要的網絡流量，確保用無請求來請求靜態組件。然后使用子域和主機保存這些靜態組件。
6.將JavaScript和CSS放在外部
現實世界中使用外部文件通常會使頁面運行更快，因為JavaScript和CSS文件被瀏覽器緩存。HTML文檔內的JavaScript和CSS會在每次請求HTML文檔時被下載。這減少了需要請求的HTTP的數量，但增加了HTML文檔的大小。另一方面，如果JavaScript和CSS在被瀏覽器緩存的外部文件中，就會減小HTML文檔大小，而不會增加請求數。
二、改進RIA小部件性能方法
主流RIA Ajax框架，如ExtJS、YUI、Dojo及其他，都提供一些精巧的小部件庫，以增強用戶體驗。與其他框架相比，Dojo在企業開發領域更強大，這是由于：
◆ Object-oriented programming(OOP)編碼
◆ 跨平臺
◆ 本地數據存儲的Dojo離線API支持
◆ DataGrid、2D和3D圖形(圖表組件提供了在瀏覽器展示報表更簡單的方法)
Dojo在很多網站廣泛使用。這里將使用Dojo舉例，分析RIA小部件的性能。可根據具體情況使用Dojo小部件調整工具，有Page Speed、Rock Star Optimizer及Jiffy。強烈建議使用YSlow和Firebug。
YSlow
YSlow根據一組高性能Web頁面準則，通過檢查頁面上所有組件，包括由JavaScript創建的，來分析Web頁面性能。YSlow是一個集成了Firebug Web開發工具的Firefox插件;它可提供提升頁面性能的建議、總結組件性能、顯示頁面統計數據并提供用于性能分析的工具。
圖中顯示的是YSlow Grade選項卡上的信息。
YSlow的Web頁面建立在22條可測試的規則基礎上，這些規則在下方按重要性和效果排列。研究顯示，按照以下規則，Web頁面響應時間可提升25%到50%：
◆ 盡量減少HTTP請求數。
◆ 使用內容發布網絡(CDN)。
◆ 添加Expires或Cache-Control頭部。
◆ 用Gzip壓縮內容。
◆ 將樣式表放在頂部。
◆ 將腳本放在底部。
◆ 避免使用CSS表達式。
◆ 將JavaScript和CSS放在外部。
◆ 減少DNS搜索。
◆ 精簡JavaScript和CSS。
◆ 避免使用重定向。
◆ 刪除重復的腳本。
◆ 配置ETags。
◆ 使Ajax可緩存。
◆ 使用GET進行Ajax請求。
◆ 減少DOM元素數。
◆ 消除404錯誤。
◆ 減小cookie大小。
◆ 對組件使用無cookie的域。
◆ 避免使用過濾器。
◆ 不在HTML中測量圖片大小。
◆ 使favicon.ico盡可能小，可緩存。
如圖：圖中的YSlow Statistics，對空緩存的訪問用戶和之前訪問過頁面的用戶的頁面大小做了對比。
Components選項卡顯示了每個組件及相關的性能信息。例如，如果組件被gzip壓縮，或ETag有內容(如果的話)，都能看到。組件大小和超期時間也顯示在Components選項卡中，如圖所示。
Firebug
Firebug與Mozilla Firefox集成，在瀏覽網站時有大量開發工具隨手可用。可以即時編輯、調試、監控Web頁面中的CSS、HTML和JavaScript。
可以使用Firebug Net面板，如圖所示，監控Web頁面產生的HTTP流量。它向用戶展示了所有收集到的和計算出的信息。每個條目表示頁面的一個請求/響應來回。
Firebug Console面板，如圖所示，提供了兩種監控代碼性能的方法。
Profile
對于某個特定的函數，使用Profiler。JavaScript Profiler是能用來測量每個JavaScript代碼執行時間的Firebug特性。使用JavaScript Profiler來提升代碼的性能，或是查看為什么某個函數運行時間過長。它與console.time();類似，但JavaScript Profiler能提供更多代碼內部過程細節。
console.time()
對于特定代碼段，使用console.time()。控制臺會顯示您輸入到命令行的命令的結果。可以使用console.time(timeName)函數測量某個特定代碼或函數執行多長時間。該特性對于提升JavaScript代碼的性能非常有用，樣例顯示：
- var timeName = 'measuringTime';
- console.time(timeName); //start of the timer
- for(var i=0;i<1000;i++){
- //do something
- console.timeEnd(timeName); //end of the timer
measuringTime：xxms將顯示在控制臺。
結束語
文中，開發者學習了如何識別Web應用程序中的一些問題或瓶頸。開發者們應了解一些工具、竅門和技巧，以用于調整和改善對用戶的性能。
原文：http://sd.csdn.net/a/20110919/304627.html
【編輯推薦】
