網頁加速的14條優化法則

譯自：http://developer.yahoo.com/performance/rules.html

最近，YouMonitor.Us在做Web應用性能優化，在網上發現了文章High Performance Web

Sites: The Importance of Front-End Performance，感覺其14

條優化法則很實用，操作性很強。是以翻譯出來，供大家參考。

Web應用性能優化黃金法則：先優化前端程式(front-end)的性能，因為這是80

%或以上的最終使用者響應時間的花費所在。

法則1. 減少HTTP請求次數

80

%的最終使用者響應時間花在前端程式上，而其大部分時間則花在各種頁面元素，如圖像、樣

式表、腳本和Flash等，的下載下傳上。減少頁面元素将會減少HTTP

請求次數。這是快速顯示頁面的關鍵所在。

一種減少頁面元素個數的方法是簡化頁面設計。但是否存在其他方式，能做到既有豐富内?

荩幟芑竦每焖傧煊κ奔淠兀懇韻率欽庋恍┘際酰?

Image maps組合多個圖檔到一張圖檔中。總檔案大小變化不大，但減少了HTTP

請求次數進而加快了頁面顯示速度。該方式隻适合圖檔連續的情況；同時坐标的定義是煩?

擻秩菀壯龃淼墓ぷ鳌?

CSS Sprites是更好的方法。它可以組合頁面中的圖檔到單個檔案中，并使用CSS的

background-image和background-position屬性來現實所需的部分圖檔。

Inline images使用data: URL scheme來在頁面中内嵌圖檔。這将增大HTML

檔案的大小。組合inline images到你的（緩存）樣式表是既能較少HTTP

請求，又能避免加大HTML檔案大小的方法。

Combined files通過組合多個腳本檔案到單一檔案來減少HTTP

請求次數。樣式表也可采用類似方法處理。這個方法雖然簡單，但沒有得到大規模的使用?

?0大美國網站每頁平均有7個腳本檔案和2

個樣式表。當頁面之間腳本和樣式表變化很大時，該方式将遇到很大的挑戰，但如果做到?

幕埃芗湧煜煊κ奔洹?

減少HTTP請求次數是性能優化的起點。這最提高首次通路的效率起到很重要的作用。據

Tenni Theurer的文章Browser Cache Usage - Exposed!描述，40-60

%的日常通路是首次通路，是以為首次通路者加快頁面通路速度是使用者體驗的關鍵。

法則2. 使用CDN(Content Delivery Network, 内容分發網絡)

使用者離web server

的遠近對響應時間也有很大影響。從使用者角度看，把内容部署到多個地理位置分散的服務?

魃轄行岣咭趁孀霸厮俣取５歉麼幽睦锟寄兀?

作為實作内容地理分布的第一步，不要試圖重構web

應用以适應分布架構。改變架構将導緻多個周期性任務，如同步session狀态，在多個

server

之間複制資料庫交易。這樣縮短使用者與内容距離的嘗試可能被應用架構改版所延遲，或阻?

埂?

我們還記得80-90

%的最終使用者響應時間花在下載下傳頁面中的各種元素上，如圖像檔案、樣式表、腳本和Flash

等。與其花在重構系統這個困難的任務上，還不如先分布靜态内容。這不僅能大大減少響?

κ奔洌矣捎贑DN的存在，分布靜态内容非常容易實作。

CDN是地理上分布的web server

的集合，用于更高效地釋出内容。通常基于網絡遠近來選擇給具體使用者服務的web server

。

一些大型網站擁有自己的CDN，但是使用如Akamai Technologies, Mirror Image

Internet, 或 Limelight Networks等CDN服務提供商的服務将是劃算的。在Yahoo

!把靜态内容分布到CDN減少了使用者影響時間20%或更多。切換到CDN

的代碼修改工作是很容易的，但能達到提高網站的速度。

法則3. 增加Expires Header

網頁内容正變得越來越豐富，這意味着更多的腳本檔案、樣式表、圖像檔案和Flash

。首次通路者将不得不面臨多次HTTP請求，但通過使用Expires header

，您可以在用戶端緩存這些元素。這在後續通路中避免了不必要的HTTP請求。Expires

header最常用于圖像檔案，但是它也應該用于腳本檔案、樣式表和Flash。

浏覽器（和代理）使用緩存來減少HTTP請求的次數和大小，使得網頁加速裝載。Web

server通過Expires header告訴用戶端一個元素可以緩存的時間長度。

如果伺服器是Apache的話，您可以使用ExpiresDefault

基于當期日期來設定過期日期，如：

ExpiresDefault “access plus 10 years” 設定過期時間為從請求時間開始計算的10

年。

請記住，如果使用超長的過期時間，則當内容改變時，您必須修改檔案名稱。在Yahoo

!我們經常把改名作為release的一個步驟：版本号内嵌在檔案名中，如yahoo_2.0.6.js。

法則4. 壓縮頁面元素

通過壓縮HTTP響應内容可減少頁面響應時間。從HTTP/1.1開始，web用戶端在HTTP

請求中通過Accept-Encoding頭來表明支援的壓縮類型，如：

Accept-Encoding: gzip, deflate.

如果Web server檢查到Accept-Encoding頭，它會使用用戶端支援的方法來壓縮HTTP

響應，會設定Content-Encoding頭，如：Content-Encoding: gzip。

Gzip是目前最流行及有效的壓縮方法。其他的方式如deflate

，但它效果較差，也不夠流行。通過Gzip，内容一般可減少70%。如果是Apache，在1.3

版本下需使用mod_gzip子產品，而在2.x版本下，則需使用mod_deflate。

Web server根據檔案類型來決定是否壓縮。大部分網站對HTML

檔案進行壓縮。但對腳本檔案和樣式表進行壓縮也是值得的。實際上，對包括XML和JSON

在内的任務文本資訊進行壓縮都是值得的。圖像檔案和PDF

檔案不應該被壓縮，因為它們本來就是壓縮格式儲存的。對它們進行壓縮，不但浪費CPU

，而且還可能增加檔案的大小。

是以，對盡量多的檔案類型進行壓縮是一種減少頁面大小和提高使用者體驗的簡便方法。

法則5. 把樣式表放在頭上

我們發現把樣式表移到HEAD

部分可以提高界面加載速度，是以這使得頁面元素可以順序顯示。

在很多浏覽器下，如IE，把樣式表放在document

的底部的問題在于它禁止了網頁内容的順序顯示。浏覽器阻止顯示以免重畫頁面元素，那?

沒е荒芸吹嬌瞻滓沉恕irefox

不會阻止顯示，但這意味着當樣式表下載下傳後，有些頁面元素可能需要重畫，這導緻閃爍問?

狻?

HTML規範明确要求樣式表被定義在HEAD

中，是以，為避免空白螢幕或閃爍問題，最好的辦法是遵循HTML規範，把樣式表放在HEAD

中。

法則6. 把腳本檔案放在底部

與樣式檔案一樣，我們需要注意腳本檔案的位置。我們需盡量把它們放在頁面的底部，這?

環矯婺芩承蛳允荊矸矯婵紗锏階畲蟮牟⑿邢略亍?

浏覽器會阻塞顯示直到樣式表下載下傳完畢，是以我們需要把樣式表放在HEAD

部分。而對于腳本來說，腳本後面内容的順序顯示将被阻塞，是以把腳本盡量放在底部意?

蹲鷗嗄谌菽鼙豢焖傧允盡?

腳本引起的第二個問題是它阻塞并行下載下傳數量。HTTP/1.1

規範建議浏覽器每個主機的并行下載下傳數不超過2

個。是以如果您把圖像檔案分布到多台機器的話，您可以達到超過2

個的并行下載下傳。但是當腳本檔案下載下傳時，浏覽器不會啟動其他的并行下載下傳，甚至其他主機?

南略匾膊黃舳?

在某些情況下，不是很容易就能把腳本移到底部的。如，腳本使用document.write

方法來插入頁面内容。同時可能還存在域的問題。不過在很多情況下，還是有一些方法的?

?

一個備選方法是使用延遲腳本（deferred script）。DEFER屬性表明腳本未包含document

.write，訓示浏覽器刻繼續顯示。不幸的是，Firefox不支援DEFER屬性。在IE

中，腳本可能被延遲執行，但不一定得到需要的長時間延遲。不過從另外角度來說，如果?

瘧灸鼙謊映僦蔥校撬塗梢員環旁诘撞苛恕?

法則7. 避免CSS表達式

CSS表達式是功能強大的(同時也是危險的)用于動态設定CSS屬性的方式。IE，從版本5

開始支援CSS表達式，如backgourd-color: expression((new Date()).getHours()%2?”#

B8D4FF”:”#F08A00”)，即背景色每個小時切換一次。

CSS表達式的問題是其執行次數超過大部分人的期望。不僅頁面顯示和resize

時計算表達式，而且當頁面滾屏，甚至當滑鼠在頁面上移動時都會重新計算表達式。

一種減少CSS

表達式執行次數的方法是一次性表達式，即當第一次執行時就以明确的數值代替表達式。?

绻匦攵柚玫幕埃墒褂檬錄砗妗Ｈ绻匦胧褂肅SS

表達式的話，請記住它們可能被執行上千次，進而影響頁面性能。

法則8. 把JavaScript和CSS放到外部檔案中

上述很多性能優化法則都基于外部檔案進行優化。現在，我們必須問一個問題：

JavaScript和CSS應該包括在外部檔案，還是在頁面檔案中？

在現實世界中，使用外部檔案會加快頁面顯示速度，因為外部檔案會被浏覽器緩存。如果?

谥肑avaScript和CSS在頁面中雖然會減少HTTP

請求次數，但增大了頁面的大小。另外一方面，使用外部檔案，會被浏覽器緩存，則頁面?

笮』峒跣。庇植輝黾親TTP請求次數。

是以，一般來說，外部檔案是更可行的方式。唯一的例外是内嵌方式對首頁更有效，如

Yahoo!和My Yahoo!都使用内嵌方式。一般來說，在一個session

中，首頁通路此時較少，是以内嵌方式可以取得更快的使用者響應時間。

法則9. 減少DNS查詢次數

DNS用于映射主機名和IP位址，一般一次解析需要20～120毫秒。為達到更高的性能，DNS

解析通常被多級别地緩存，如由ISP或區域網路維護的caching server

，本地機器作業系統的緩存（如windows上的DNS Client Service），浏覽器。IE的預設

DNS緩存時間為30分鐘，Firefox的預設緩沖時間是1分鐘。

減少主機名可減少DNS查詢的次數，但可能造成并行下載下傳數的減少。避免DNS

查詢可減少響應時間，而減少并行下載下傳數可能增加響應時間。一個可行的折中是把内容分?

嫉街遼?個，最多4個不同的主機名上。

法則10. 最小化JavaScript代碼

最小化JavaScript代碼指在JS

代碼中删除不必要的字元，進而降低下載下傳時間。兩個流行的工具是JSMin 和YUI

Compressor。

混淆是最小化于源碼的備選方式。象最小化一樣，它通過删除注釋和空格來減少源碼大小?

彼箍梢遠源虢謝煜怼Ｗ魑煜囊徊糠鄭捅淞棵惶婊懷啥痰淖?

符串，這使得代碼更緊湊，同時也更難讀，使得難于被反向工程。Dojo Compressor (

ShrinkSafe)是最常見的混淆工具。

最小化是安全的、直白的過程，而混淆則更複雜，而且容易産生問題。從對美國10

大網站的調查來看，通過最小化，檔案可減少21%，而混淆則可減少25%。

除了最小化外部腳本檔案外，内嵌的腳本代碼也應該被最小化。即使腳本根據法則4

被壓縮後傳輸，最小化腳本刻減少檔案大小5%或更高。

法則11. 避免重定向

重定向功能是通過301和302這兩個HTTP狀态碼完成的，如：

       HTTP/1.1 301 Moved Permanently

       Location: http://example.com/newuri

       Content-Type: text/html

浏覽器自動重定向請求到Location指定的URL上，重定向的主要問題是降低了使用者體驗。

一種最耗費資源、經常發生而很容易被忽視的重定向是URL的最後缺少/，如通路http://

astrology.yahoo.com/astrology将被重定向到http://astrology.yahoo.com/astrology

/。在Apache下，可以通過Alias，mod_rewrite或DirectorySlash等方式來解決該問題。

法則12. 删除重複的腳本檔案

在一個頁面中包含重複的JS腳本檔案會影響性能，即它會建立不必要的HTTP請求和額外的

JS執行。

不必要的HTTP請求發生在IE下，而Firefox不會産生多餘的HTTP請求。額外的JS

執行，不管在IE下，還是在Firefox下，都會發生。

一個避免重複的腳本檔案的方式是使用模闆系統來建立腳本管理子產品。除了防止重複的腳?

疚募猓媚？榛箍梢允迪忠覽敵約觳楹馱黾影姹競諾澆瘧疚募校傭迪殖さ墓?

期時間。

法則13. 配置ETags

ETags是用于确定浏覽器緩存中元素是否與Web server中的元素相比對的機制，它是比

last-modified date更靈活的元素驗證機制。ETag

是用于唯一表示元素版本的字元串，它需被包括在引号中。Web server首先在response

中指定ETag：

       HTTP/1.1 200 OK

10c24bc-4ab-457e1c1f"

       Content-Length: 12195

後來，如果浏覽器需要驗證某元素，它使用If-None-Match頭回傳ETag給Web server

，如果ETag比對，則伺服器傳回304代碼，進而節省了下載下傳時間：

       GET /i/yahoo.gif HTTP/1.1

       Host: us.yimg.com

10c24bc-4ab-457e1c1f"

       HTTP/1.1 304 Not Modified

ETags的問題在于它們是基于伺服器唯一性的某些屬性構造的，如Apache1.3和2.x

，其格式是inode-size-timestamp，而在IIS5.0和6.0下，其格式是Filetimestamp:

ChangeNumber。這樣同一個元素在不同的web server上，其ETag是不一樣的。這樣在多

Web server的環境下，浏覽器先從server1請求某元素，後來向server2驗證該元素，由于

ETag不同，是以緩存失效，必須重新下載下傳。

是以，如果您未用到ETags系統提供的靈活的驗證機制，最好删除ETag。删除ETag會減少

http response及後續請求的HTTP頭的大小。微軟支援文章描述了如何删除ETags，而在

Apache下，隻要在配置檔案中設定FileETag none即可。

法則14. 緩存Ajax

性能優化法則同樣适用于web 2.0應用。提高Ajax的性能最重要的方式是使得其response

可緩存，就象“法則3增加Expires Header”讨論的那樣。以下其他法則同樣适用于Ajax

，當然法則3是最有效的方式:

法則4. 壓縮頁面元素

法則9. 減少DNS查詢次數

法則10. 最小化腳本檔案

法則11. 避免重定向

法則13. 配置ETags.