提高Web應用程序性能的最佳實踐

導讀：做爲開發人員，Web頁面加載或刷新的速度對其網站相當重要。在瀏覽器中調整性能問題比在Java應用程 序中更難。開發人員在各類瀏覽器中調試JavaScript的方法要少得多。好比，在Mozilla Firefox中，可使用Firebug調試JavaScript，但仍然不能調整不少性能問題，如瀏覽器呈現消耗時間。爲了解決這些問題，有必要開發 瀏覽器插件來監控時間響應，以及肯定其餘對應解決方案如部分呈現或延時加載。

本文節選自IBM developerWorks 提高Web應用程序的性能的系列文章，該文經過Web應用程序性能的最佳實踐案例，幫助開發者更好地理解影響Web應用程序性能的因素，學習如何診斷Web應用程序中的性能問題，找到客戶端內容中的瓶頸，並肯定解決方案。

1、提高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文檔大小，而不會增長請求數。

2、改進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=;i<1000;i++){    
 
 
    
//do something    
 
 
    
console.timeEnd(timeName);  //end of the timer 
 

   

measuringTime：xxms將顯示在控制檯。

結束語

文中，開發者學習瞭如何識別Web應用程序中的一些問題或瓶頸。開發者們應瞭解一些工具、竅門和技巧，以用於調整和改善對用戶的性能。