提高 web 應用程序的性能（二）

最佳實踐

本章將略述能幫助您提高 web 應用程序性能的最佳實踐。

減小 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 屬性來顯示所需圖片部分。還可以使用內聯圖片減小請求數。

後置加載組件

只呈現須要的組件；其他可等待。最好不要一次呈現太多組件。

某些狀況下，可以使用後置加載。因爲瀏覽器可視區域外的組件能夠後置加載，當這些組建進入可視區域不久後，初始呈現就會失效。

有些 JavaScript 能夠在 onload 事件後後置加載，如 JavaScript 中初始呈現後拖動某個元素。

前置加載組件

經過前置加載組件，能夠利用瀏覽器的空閒時間請求未來會用到的組件（如圖像、樣式和腳本）。當用戶訪問下個頁面時，若是大多數組件都已在緩存中加載，那頁面加載會快得多。

有兩種前置加載：

• 無條件：一旦觸發 onload，就取得一些額外組件。
• 有條件：根據用戶的動做，推測用戶下一步的方向並進行相應的前置加載。

將腳本放在底部

腳本可能會產生問題，由於它們可能會阻礙並行下載。當下載腳本時，瀏覽器不會再啓動其餘下載 — 即便那些位於不一樣主機。將腳本，如樣式表，放在底部，以保證它們在其餘下載完成後再下載。

也可使用延時腳本，這隻有 Internet Explorer 支持。DEFER 屬性表示腳本不含 document.write()。這就告訴瀏覽器他們能夠持續呈現。

使用無 cookie 域組件

當瀏覽器發出對靜態圖片的請求，並隨之發送 cookie 時，服務器不會使用那些 cookie。因爲這些 cookie 只會形成沒必要要的網絡流量，確保用無請求來請求靜態組件。而後使用子域和主機保存這些靜態組件。

將 JavaScript 和 CSS 放在外部

現實世界中使用外 部文件一般會使頁面運行更快，由於 JavaScript 和 CSS 文件被瀏覽器緩存。HTML 文檔內聯的 JavaScript 和 CSS 會在每次請求 HTML 文檔時被下載。這減小了須要請求的 HTTP 的數量，但增長了 HTML 文檔的大小。另外一方面，若是 JavaScript 和 CSS 在被瀏覽器緩存的外部文件中，就會減少 HTML 文檔大小，而不會增長請求數。

 

 

 

 

YSlow

YSlow 根據一組高性能 web 頁面準則，經過檢查頁面上全部組件，包括由 JavaScript 建立的，來分析 web 頁面性能。YSlow 是一個集成了 Firebug web 開發工具的 Firefox 插件；它可提供提高頁面性能的建議、總結組件性能、顯示頁面統計數據並提供用於性能分析的工具。

圖 3 顯示的是 YSlow Grade 選項卡上的信息。

圖 3. 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 儘量小，可緩存。