提高網頁設計的效能
原文︰http://developer.yahoo.com/performance/rules.html
從2004年開始,我開始進入雅虎的異常表現小組。我們是一個很小的隊伍,專門針對雅虎的產品進行質量檢測和改進,我作為一個後端工程師,現下卻開始搗鼓前端代碼優化方面的工程,所以我認為這是一個極好的進步的機會。我的目標是改進用戶端體驗,我度量了在各個帶寬下瀏覽器的附應時間,得出如下的一個圖表,它展示了來自http://yahoo.com的http的流量。
以上圖標的第一個標籤就是網頁html,是一個網頁設計html文檔最開始加載的東東,在這個例子中,讀取網頁設計中html代碼只占了整個附應時間中的5%,這個結果適用於絕大多數網站,在采樣美國的前十位網站中,只有一家網頁設計頁面超過5%但少於20%,其餘80%的時間是用來讀取網頁設計頁面的其他內容的,也就是說,前端(原文是front-end,意思就是不包括網頁設計html代碼的其餘內容,可以是網頁設計圖片,腳本,flash,視頻,各種東西)。這就是為什麼我們要把目光集中在這些東西來提升網頁設計頁面顯示速度的關鍵原因。
為什麼要從網頁設計頁面前端開始著手有三個主要原因︰
這裡有提升和改進的潛力。如果能減少一半的體積,就能減少40%的附應時間 改進網頁設計頁面前端比改進後端需要的時間和資源更少。(改進網頁設計頁面後端要重新設計應用程式規劃,代碼,尋找優化代碼的方法,添加或改變硬體配置,分佈式數據庫,等等) 前端的改進在我們的工作中已經被證實,我們在yahoo有五十個小組,在我們的最佳表現規則下,提升了他們的用戶端附應時間達到25%或更高。 我們的黃金規則是︰首先優化前端表現,這些東西耗費了用戶端附應時間中的80%。
1.網頁設計頁面減少http請求數
網頁設計的圖片,css,script,flash網頁,等等這些都會增加http請求數,減少這些元素的數量能減少附應時間。
CSS Sprites網頁設計技術能減少圖片的請求數,把零散的小圖片放到一起,運用background-position來改變背景圖片的位置,前提是網頁設計頁面html元素事先定義好寬高,其實就像一個遮罩,移動背景就會看到不同的景象。
網頁設計頁面內嵌圖像 用data:URL scheme的模式把圖片內容代碼直接嵌入網頁html代碼中,這樣會增大網頁設計頁面html代碼的體積,改進的模式是把內嵌圖片嵌入到css中(css被緩存),這樣就會更好的減少http請求數而且不增大html的體積。
很多用戶都是在空緩存的情況下進入你的網站的,這樣第一次的速度就會顯得很重要。
第一條規則是最重要的一條規則。
2.網頁設計運用cdn技術
見︰ http://hi.baidu.com/axne/blog/item/258e23ade2d76f0a4b36d6d1.html
3.網頁設計增加一個長時間過期的頭部
瀏覽器會用緩存來減少http請求數來加快網頁設計頁面加載的時間,如果頁面頭部加一個很長的過期時間,瀏覽器就會一直緩存頁面裡的元素。不過這樣會帶來一個問題,就是如果網頁設計頁面裡的東西變動的話就要改名字了,否則用戶端不會主動刷新,在yahoo工作組用的是版本號,例如yahoo_2.0.6.js
4.Gzip壓縮
Gzip是現下最流行和最有效的壓縮模式,她是GNU開發的,RFC1952標準化。
(Gzip是在伺服器端壓縮圖片,css,腳本等,傳送到用戶端的瀏覽器再解壓,這樣可以提升傳輸速度,不過對伺服器的壓力會增大,一般選擇部分元素壓縮比較合適。)
5.把網頁設計樣式表放到頂部
我們發現把css放到網頁設計文檔頭部會讓網頁加載得更快。因為這樣可以讓頁面逐漸加載。
把樣式表放到接近底部的問題是它阻止了頁面元素的逐漸顯示。這樣還會導致“flash of unstyled content” 即在樣式表加載之前網頁設計頁面內容是以沒有樣式的形式顯示出來的,待加載完樣式後,網頁設計頁面重繪,內容一閃即改變了樣式表現。
6.把網頁設計選單放到底部
把網頁設計選單放到儘可能底部的地方,一個原因是讓網頁設計頁面逐漸渲染,另一個是實現更好的並行下載。
對於選單,選單以下的網頁設計內容被阻止逐漸加載了,因為只有當下載完選單以後才會下載下面的內容,第二個選單引起的問題是阻止平行下載。 "http/1.1 specification"建議瀏覽器對一個域名, 同一時間下載數不超過2個(按︰實際監測發現一般有超過2個),我曾經讓ie並行下載100個圖片。 當選單正在下載的時候,瀏覽器不會開始下載任何東西。
7.網頁避免css expressions
css expressions 是一個有力(和危險)的模式動態的網頁設計改變css的屬性。他們自ie5就開始被支持,舉個例子,用css expression可以讓背景色每個小時輪換一次。但是被非ie瀏覽器忽略的。
background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );
expressions的問題就在與它的計算頻率絕對超出我們的想像,甚至當我們移動鼠標,都會引起網頁設計頁面的重繪﹗
下面是舉例頁面
減少css expressions計算次數的一個方法就是使用一次性的expressions。 當第一次expression計算出一個明確的值,就讓樣式等於這個值,不再變動。如果樣式的屬性一定要動態的改變,就用時間句柄吧﹗
8.讓網頁設計選單和樣式外延
javascript和CSS應該是外部調用還是內嵌呢?
用外部調用文件的模式更快,因為他們是可以被緩存的,如果是內嵌在網頁設計頁面中他們就無法被緩存了﹗想想如果用戶要在你的網站看很多很多的頁面,如果都是使用同一個外部腳本和樣式,那麼他們一旦被緩存,就再也不需要下載了,這樣會給你帶來很大的潛在好處。
9.減少網頁DNS查詢
10.減小腳本體積
有兩個比較流行的網頁設計工具是用來減小腳本的體積的--JSMin和YUI Compressor
(按︰這個壓縮和Gzip壓縮是不一樣的,Gzip是傳輸壓縮,這個是代碼壓縮
11.避免網頁重定向
重定向網頁會減慢用戶體驗,它會延遲所有的東西直至到達新頁面。一個最浪費的重定向經常會發生而我們的開發者又會經常忽略的就是比如http://astrology.yahoo.com/astrology的結果是重定向到http://astrology.yahoo.com/astrology/ 在Apache裡用Alias 或者mod_rewrite或者DirectorySlash解決。
從一個舊網站跳轉到新網站也是經常要用到重定向,還有就是連接一個網站中的不同部分和在某些情況下(比如不同網頁瀏覽器,不同的用戶帳號類型,等等)的用戶導向。用重定向很簡單,而且只需要一點額外的代碼,雖然在這些情況下用重定向減少了開發者的複雜度,但它降低了用戶的體驗,變通的做法是用Alias和mod_rewrite如果兩個部分是在同一主機上的話,如果是由域名變更引起的重定向,變通的做法是透過Alias或mod_rewrite創建一個CNAME(一個DNS記錄,創建一個別名,從一個域名指向另一個域名)
12.網頁去掉重複的選單
(按︰簡單的說,同一個選單 如果被調用多次,瀏覽器並不會忽略後續的選單 ,而總是覆蓋加載,覆蓋營運,這樣會增加開銷)
13.網頁設計配置ETags
ETags(Entity tags)是伺服器和瀏覽器的一個功能,它用來判斷網頁瀏覽器緩存裡的元素是否和原來伺服器上的一致。ETags比last-modified date更具有彈性,它用一個獨一無二的字元串來標識一個元素的版本。
源伺服器用附應頭裡的ETag來特定一個元素的ETag︰
HTTP/1.1 200 OK
Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT
ETag: "10c24bc-4ab-457e1c1f"
Content-Length: 12195
之後,如果網頁瀏覽器要驗証這個元素,它就會用If-None-Match頭來回傳ETag到源伺服器。如果符合的話,一個304狀態的代碼就會從源伺服器返回到瀏覽器,這樣源伺服器就節省了傳輸具體數據的開銷。
GET /i/yahoo.gif HTTP/1.1
Host: us.yimg.com
If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT
If-None-Match: "10c24bc-4ab-457e1c1f" Webjx.Com
HTTP/1.1 304 Not Modified
用Etags的問題就在於它會標識那個特定的伺服器,如果換了伺服器,Etags也就失去了原有的功能,但是這種現下在網路上太常見了,因為我們經常用伺服器集群。默認情況下,Apache和IIS會在Etag中內嵌數據,這樣會動態減少驗証成功的機會。
Apache1.3和2.x的ETag格式是inode-size-timestamp。雖然一個文件可能在不同網頁伺服器的同一個目錄,同樣的大小,安全級,時間戳等等,它的inode會隨著伺服器的不同而不同。
IIS5.0和6.0有同樣類似Etags的東西,叫時間戳︰ChangeNumber(更改號),更改號是一個用來追蹤IIS配置變化的計數器,ChangeNumber在不同IIS伺服器之間是不一樣的。
它最終的問題就是,IIS和Apache產生的Etags會在不同伺服器之間無法匹配,這樣我們的網頁瀏覽器就無法得到我們期待的304附應,而給我們的是一個普通的200附應,和正常的數據流。如果你的網站只有一個伺服器還無所謂,如果是集群,而你用的是默認的ETag配置,你的用戶就會獲得更慢的網頁設計頁面,你的伺服器也會有更高的負載,消耗更大的帶寬資源,代理也無法高效緩存你的內容,甚至即使你有一個長時間過期的頭部(按︰見第三條規則),也不會阻止它重新載入網頁設計內容。
如果你不想發揮Etags提供的這個彈性驗証模型的優勢,你最好關掉它。Apache中關掉它的方法是在Apache的配置文件中寫這麼一句︰
FileETag none
14.讓Ajax緩存
人們會問這些規則同樣適用於web2.0嗎?當然﹗這個規則是我在雅虎工作做web2.0後得出的第一條規則。
Ajax的一個好處是它會給你實時的回饋,因為它和後台的伺服器是異步傳輸的,然而,用Ajax並不能保證你的用戶不用無聊的撥弄手指頭來等待這個回饋,在很多應用中,用戶是否需要等待取決於Ajax是怎麼用的,舉例說,在一個基於網頁的郵件客戶端,用戶會持續等待Ajax的回饋來搜索符合他的標準的郵件訊息。記住“異步”並不意味著“實時”。讓它緩存的模式同樣是加一個過期頭部。
基于以上規則,yahoo出了一個延伸firebug插件的插件。在這裡下載︰
http://developer.yahoo.com/yslow/ |