提升Web應用程式性能的最佳實踐
2011-09-20 07:02 | 10479次閱讀 | 來源：CSDN綜合整理 【已有23條評論】發表評論
關鍵詞：Web應用 | 作者：夏夢竹 | 收藏這篇資訊
導讀：作為開發人員，Web頁面加載或重新整理的速度對其網站至關重要。在浏覽器中調整性能問題比在Java應用程式中更難。開發人員在各種浏覽器中調試JavaScript的方法要少得多。比如，在Mozilla Firefox中，可以使用Firebug調試JavaScript，但仍然不能調整很多性能問題，如浏覽器呈現消耗時間。為了解決這些問題，有必要開發浏覽器插件來監控時間響應，以及确定其他對應解決方案如部分呈現或延時加載。
本文節選自IBM developerWorks 提升Web應用程式的性能的系列文章，該文通過Web應用程式性能的最佳實踐案例，幫助開發者更好地了解影響Web應用程式性能的因素，學習如何診斷Web應用程式中的性能問題，找到用戶端内容中的瓶頸，并确定解決方案。
一、提升Web應用程式性能的6種基本方式
1.減少HTTP請求數
每個HTTP請求都有開銷，包括查找DNS、建立連接配接及等待響應，是以削減不必要的請求數可減少不必要的開銷。要減少請求數：
- 合并檔案。将總是同時使用的腳本合并到同一個檔案中，不會減小總大小，但将會減少請求數。還可以同樣方法合并CSS檔案和圖檔。可以實作檔案自動合并：
- 在建構階段。用<concat>标記，通過運作Ant合并檔案。
- 在運作時階段。啟用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應用程式中的一些問題或瓶頸。開發者們應了解一些工具、竅門和技巧，以用于調整和改善對使用者的性能。