網(wǎng)頁加速的14條優(yōu)化法則

Web 應(yīng)用性能優(yōu)化黃金法則：先優(yōu)化前端程序 (front-end)的性能，因?yàn)檫@是 80%或以上的最終用戶響應(yīng)時(shí)間的花費(fèi)所在。 法則 1. 減少 HTTP 請(qǐng)求次數(shù) 80%的最終用戶響應(yīng)時(shí)間花在前端程序上，而其大部分時(shí)間則花在各種頁面元素，如圖像、樣式表、腳本和 Flash 等，的下載上。減少頁面元素將會(huì)減少 HTTP 請(qǐng)求次數(shù)。這是快速顯示頁面的關(guān)鍵所在。 一種減少頁面元素個(gè)數(shù)的方法是簡化頁面設(shè)計(jì)。但是否存在其他方式，能做到既有豐富內(nèi)容，又能獲得快速響應(yīng)時(shí)間呢？以下是這樣一些技術(shù)： Image maps 組合多個(gè)圖片到一張圖片中?？偽募笮∽兓淮?，但減少了 HTTP請(qǐng)求次數(shù)從而加快了頁面顯示速度。該方式只適合圖片連續(xù)的情況；同時(shí)坐標(biāo)的定義是煩人又容易出錯(cuò)的工作。 CSS Sprites 是更好的方法。它可以組合頁面中的圖片到單個(gè)文件中，并使用 CSS的 background-image 和 background-position 屬性來現(xiàn)實(shí)所需的部分圖片。 Inline images 使用 data: URL scheme 來在頁面中內(nèi)嵌圖片。這將增大 HTML 文件的大小。組合 inline images 到你的（緩存）樣式表是既能較少 HTTP 請(qǐng)求，又能避免加大 HTML 文件大小的方法。 Combined files 通過組合多個(gè)腳本文件到單一文件來減少 HTTP 請(qǐng)求次數(shù)。樣式表也可采用類似方法處理。這個(gè)方法雖然簡單，但沒有得到大規(guī)模的使用。 10大美國網(wǎng)站每頁平均有 7 個(gè)腳本文件和 2 個(gè)樣式表。當(dāng)頁面之間腳本和樣式表變化很大時(shí)，該方式將遇到很大的挑戰(zhàn)，但如果做到的話，將能加快響應(yīng)時(shí)間。 減少 HTTP 請(qǐng)求次數(shù)是性能優(yōu)化的起 點(diǎn)。這最提高首次訪問的效率起到很重要的作用。據(jù) Tenni Theurer 的文章 Browser Cache Usage - Exposed!描述， 40-60%的日常訪問是首次訪問，因此為首次訪問者加快頁面訪問速度是用 戶體驗(yàn)的關(guān)鍵。 法則 2. 使用 CDN(Content Delivery Network, 內(nèi)容分發(fā)網(wǎng)絡(luò) ) 用戶離 web server 的遠(yuǎn)近對(duì)響應(yīng)時(shí)間也有很大影響。從用戶角度看，把內(nèi)容部署到多個(gè)地理位置分散的服務(wù)器上將有效提高頁面裝載速度。但是該從哪里開始呢？ 作為實(shí)現(xiàn)內(nèi)容地理分布的第一步，不要試圖重構(gòu) web 應(yīng)用以適應(yīng)分布架構(gòu)。改變架構(gòu)將導(dǎo)致多個(gè)周期性任務(wù)，如同步 session 狀態(tài)，在多個(gè) server 之間復(fù)制數(shù)據(jù)庫交易。這樣縮短用戶與內(nèi)容距離的嘗試可能被應(yīng)用架構(gòu)改版所延遲，或阻止。 我們還記得 80-90%的最 終用戶響應(yīng)時(shí)間花在下載頁面中的各種元素上，如圖像文件、樣式表、腳本和 Flash 等。與其花在重構(gòu)系統(tǒng)這個(gè)困難的任務(wù)上，還不如先分布靜態(tài)內(nèi)容。這不僅能大大減少響應(yīng)時(shí)間，而且由于 CDN 的存在，分布靜態(tài)內(nèi)容非常容易實(shí)現(xiàn)。 CDN 是地理上分布的 web server 的集合，用于更高效地發(fā)布內(nèi)容。通常基于網(wǎng)絡(luò)遠(yuǎn)近來選擇給具體用戶服務(wù)的 web server。 一些大型網(wǎng)站擁有自己的 CDN，但是使用如 Akamai Technologies, Mirror Image Internet, 或 Limelight Networks 等 CDN 服務(wù)提供商的服務(wù)將是劃算的。在Yahoo!把靜態(tài)內(nèi)容分布到 CDN 減少了用戶影響時(shí)間 20%或更多。切換到 CDN 的代碼修改工作是很容易的，但能達(dá)到提高網(wǎng)站的速度。 法則 3. 增加 Expires Header 網(wǎng)頁內(nèi)容正變得越來越豐富，這意味著更多的腳本文件、樣式表、圖像文件和Flash。首次訪問者將不得不面臨多次 HTTP 請(qǐng)求，但通過使用 Expires header，您可以在客戶端緩存這些元素。這在后續(xù)訪問中避免了不必要的 HTTP 請(qǐng)求。Expires header 最常用于圖像文件，但是它也應(yīng)該用于腳本文件、樣式表和Flash。 瀏覽器（和代理） 使用緩存來減少 HTTP 請(qǐng)求的次數(shù)和大小，使得網(wǎng)頁加速裝載。Web server 通過 Expires header 告訴客戶端一個(gè)元素可以緩存的時(shí)間長度。 如果服務(wù)器是 Apache 的話，您可以使用 ExpiresDefault 基于當(dāng)期日期來設(shè)置過期日期，如： ExpiresDefault “access plus 10 years” 設(shè)置過期時(shí)間為從請(qǐng)求時(shí)間開始計(jì)算的 10 年。 請(qǐng)記住，如果使用超長的過期時(shí)間，則當(dāng)內(nèi)容改變時(shí)，您必須修改文件名稱。在Yahoo!我們經(jīng)常把改名作為 release 的一個(gè)步驟：版本號(hào)內(nèi)嵌在 文件名中，如yahoo_2.0.6.js。 法則 4. 壓縮頁面元素 通過壓縮 HTTP 響應(yīng)內(nèi)容可減少頁面響應(yīng)時(shí)間。從 HTTP/1.1 開始， web 客戶端在HTTP 請(qǐng)求中通過 Accept-Encoding 頭來表明支持的壓縮類型，如： Accept-Encoding: gzip, deflate. 如果 Web server 檢查到 Accept-Encoding 頭，它會(huì)使用客戶端支持的方法來壓縮 HTTP 響應(yīng)，會(huì)設(shè)置 Content-Encoding 頭，如： Content-Encoding: gzip。 Gzip 是目前最流 行及有效的壓縮方法。其他的方式如 deflate，但它效果較差，也不夠流行。通過 Gzip，內(nèi)容一般可減少 70%。如果是 Apache，在 1.3 版本下需使用 mod_gzip 模塊，而在 2.x 版本下，則需使用 mod_deflate。 Web server 根據(jù)文件類型來決定是否壓縮。大部分網(wǎng)站對(duì) HTML 文件進(jìn)行壓縮。但對(duì)腳本文件和樣式表進(jìn)行壓縮也是值得的。實(shí)際上，對(duì)包括 XML 和 JSON 在內(nèi)的任務(wù)文本信息進(jìn)行壓縮都是值得的。圖像文件和 PDF 文件不應(yīng)該被壓縮，因?yàn)樗鼈儽緛砭褪菈嚎s格式保存的。對(duì)它們進(jìn)行壓縮，不但浪費(fèi) CPU，而且還可能增加文件的大小。 因此，對(duì)盡量多的 文件類型進(jìn)行壓縮是一種減少頁面大小和提高用戶體驗(yàn)的簡便方法。 法則 5. 把樣式表放在頭上 我們發(fā)現(xiàn)把樣式表移到 HEAD 部分可以提高界面加載速度，因此這使得頁面元素可以順序顯示。 在很多瀏覽器下，如 IE，把樣式表放在 document 的底部的問題在于它禁止了網(wǎng)頁內(nèi)容的順序顯示。瀏覽器阻止顯示以免重畫頁面元素，那用戶只能看到空白頁了。 Firefox 不會(huì)阻止顯示，但這意味著當(dāng)樣式表下載后，有些頁面元素可能需要重畫，這導(dǎo)致閃爍問題。 HTML 規(guī)范 明確要求樣式表被定義在 HEAD 中，因此，為避免空白屏幕或閃爍問題，最好的辦法是遵循 HTML 規(guī)范，把樣式表放在 HEAD 中。 法則 6. 把腳本文件放在底部 與樣式文件一樣，我們需要注意腳本文件的位置。我們需盡量把它們放在頁面的底部，這樣一方面能順序顯示，另方面可達(dá)到最大的并行下載。 瀏覽器會(huì)阻塞顯示直到樣式表下載完畢，因此我們 需要把樣式表放在 HEAD 部分。而對(duì)于腳本來說，腳本后面內(nèi)容的順序顯示將被阻塞，因此把腳本盡量放在底部意味著更多內(nèi)容能被快速顯示。 腳本引起的第二個(gè)問題是它阻塞并行下載數(shù)量。 HTTP/1.1 規(guī)范 建議瀏覽器每個(gè)主機(jī)的并行下載數(shù)不超過 2 個(gè)。因此如果您把圖像文件分布到多臺(tái)機(jī)器的話，您可以達(dá)到超過 2 個(gè)的并行下載。但是當(dāng)腳本文件下載時(shí)，瀏覽器不會(huì)啟動(dòng)其他的并行下載，甚至其他主機(jī)的下載也不啟動(dòng)。 在某些情況下，不是很容易就能把腳本移到底部的。如，腳本使用document.write 方法來插入頁面內(nèi)容。同時(shí)可能還存在域的問題。不過在很多情況下，還是有一些方法的。 一個(gè)備選方法是使用延遲腳本（ deferred script）。 DEFER 屬性表明腳本未包含 document.write，指示瀏覽器刻繼續(xù)顯示。不幸的是 ， Firefox 不支持 DEFER屬性。在 IE 中，腳本可能被延遲執(zhí)行，但不一定得到需要的長時(shí)間延遲。不過從另外角度來說，如果腳本能被延遲執(zhí)行，那它就可以被放在底部了。 法則 7. 避免 CSS表達(dá)式 CSS 表達(dá)式是功能強(qiáng)大的 (同時(shí)也是危險(xiǎn)的 )用于動(dòng)態(tài)設(shè)置 CSS 屬性的方式。 IE，從版本 5 開始支持 CSS 表達(dá)式，如 backgourd-color: expression(new Date().getHours()%2?”#B8D4FF”:”#F08A00”) ，即背景色每個(gè)小時(shí)切換一次。 CSS 表達(dá)式的問題是其執(zhí)行次數(shù) 超過大部分人的期望。不僅頁面顯示和 resize時(shí)計(jì)算表達(dá)式，而且當(dāng)頁面滾屏，甚至當(dāng)鼠標(biāo)在頁面上移動(dòng)時(shí)都會(huì)重新計(jì)算表達(dá)式。 一種減少 CSS 表達(dá)式執(zhí)行次數(shù)的方法是一次性表達(dá)式，即當(dāng)?shù)谝淮螆?zhí)行時(shí)就以明確的數(shù)值代替表達(dá)式。如果必須動(dòng)態(tài)設(shè)置的話，可使用事件處理函數(shù)代替。如果您必須使用 CSS 表達(dá)式的話，請(qǐng)記住它們可能被執(zhí)行上千次，從而影響頁面性能。 法則 8. 把 JavaScript 和 CSS 放到外部文件中 上述很多性能優(yōu)化法則都基于外部文件進(jìn)行優(yōu)化。現(xiàn)在，我們必須問一個(gè)問題：JavaScript 和 CSS 應(yīng)該包括在外部文件 ，還是在頁面文件中？ 在現(xiàn)實(shí)世界中，使用外部文件會(huì)加快頁面顯示速度，因?yàn)橥獠课募?huì)被瀏覽器緩存。如果內(nèi)置 JavaScript 和 CSS 在頁面中雖然會(huì)減少 HTTP 請(qǐng)求次數(shù)，但增大了頁面的大小。另外一方面，使用外部文件，會(huì)被瀏覽器緩存，則頁面大小會(huì)減小，同時(shí)又不增加 HTTP 請(qǐng)求次數(shù)。 因此，一般來說，外部文件是更可行的方式。唯一的例外是內(nèi)嵌方式對(duì)主頁更有效，如 Yahoo!和 My Yahoo!都使用內(nèi)嵌方式。一般來說，在一個(gè) session 中，主頁訪問此時(shí)較少，因此內(nèi)嵌方式可以取得更快的用戶響應(yīng)時(shí)間。 法則 9. 減少 DNS查詢次數(shù) DNS 用于映射主機(jī)名和 IP 地址，一般一次解析需要 20 120 毫秒。為達(dá)到更高的性能， DNS 解析通常被多級(jí)別地緩存，如由 ISP 或局域網(wǎng)維護(hù)的 caching server，本地機(jī)器操作系統(tǒng)的緩存（如 windows 上的 DNS Client Service），瀏覽器。 IE 的缺省 DNS 緩存時(shí)間為 30 分鐘， Firefox 的缺省緩沖時(shí)間是 1 分鐘。 減少主機(jī)名可減少 DNS 查詢的次數(shù)，但可能造成并行下載數(shù)的減少。避免 DNS查詢可減少響應(yīng)時(shí)間，而減少并行下載數(shù)可能增加響應(yīng)時(shí)間。一個(gè)可行的折中是把內(nèi)容分布到至少 2 個(gè)，最多 4 個(gè)不同的主機(jī)名上。 法則 10. 最小化 JavaScript 代碼 最小化 JavaScript 代碼指在 JS 代碼中刪除不必要的字符，從而降低下載時(shí)間。兩個(gè)流行的工具是 JSMin 和 YUI Compressor。 混淆是最小化于源碼的備選方式。象最小化一樣，它通過刪除注釋和空格來減少源碼大小，同時(shí)它還可以對(duì)代碼進(jìn)行混淆處理。作為混淆的一部分，函數(shù)名和變量名 被替換成短的字符串，這使得代碼更緊湊，同時(shí)也更難讀，使得難于被反向工程。 Dojo Compressor (ShrinkSafe)是最常見的混淆工具。 最小化是安全的、直白的過程，而混淆則更復(fù)雜，而且容易產(chǎn)生問題。從對(duì)美國10 大網(wǎng)站的調(diào)查來看，通過最小化，文件可減少 21%，而混淆則可減少 25%。 除了最小化外部腳本 文件外，內(nèi)嵌的腳本代碼也應(yīng)該被最小化。即使腳本根據(jù)法則 4 被壓縮后傳輸，最小化腳本刻減少文件大小 5%或更高。 法則 11. 避免重定向 重定向功能是通過 301 和 302 這兩個(gè) HTTP 狀態(tài)碼完成的，如： HTTP/1.1 301 Moved Permanently Location: /newuri Content-Type: text/html 瀏覽器自動(dòng)重定向請(qǐng)求到 Location 指定的 URL 上，重定向的主要問題是降低了用戶體驗(yàn)。 一種最耗 費(fèi)資源、經(jīng)常發(fā)生而很容易被忽視的重定向是 URL 的最后缺少 /，如訪問 /astrology 將被重定向到/astrology/。在 Apache 下，可以通過 Alias，mod_rewrite 或 DirectorySlash 等方式來解決該問題。 法則 12. 刪除重復(fù)的腳本文件 在一個(gè)頁面中包含重復(fù)的 JS 腳本文件會(huì)影響性能，即它會(huì)建立不必要的 HTTP請(qǐng)求和額外的 JS 執(zhí)行。 不必要的 HTTP 請(qǐng)求發(fā)生在 IE 下，而 Firefox 不會(huì)產(chǎn)生多余的 HTTP 請(qǐng)求。額外的 JS 執(zhí)行，不管在 IE 下，還是在 Firefox 下，都會(huì)發(fā)生。 一個(gè)避免重復(fù)的腳本文件的方式是 使用模板系統(tǒng)來建立腳本管理模塊。除了防止重復(fù)的腳本文件外，該模塊還可以實(shí)現(xiàn)依賴性檢查和增加版本號(hào)到腳本文件名中，從而實(shí)現(xiàn)超長的過期時(shí)間。 法則 13. 配置 ETags ETags 是用于確定瀏覽器緩存中元素是否與 Web server 中的元素相匹配的機(jī)制，它是比 last-modified date 更靈活的元素驗(yàn)證機(jī)制。 ETag 是用于唯一表示元素版本的字符串，它需被包括在引號(hào)中。 Web server 首先在 response 中指定 ETag： HTTP/1.1 200 OK 10c24bc-4ab-457e1c1f Content-Length: 12195 后來，如果瀏覽器需要驗(yàn)證某元素，它使用 If-None-Match 頭回傳 ETag 給 Web server，如果 ETag 匹配，則服務(wù)器返回 304 代