網(wǎng)站建設高性能表現的網(wǎng)站發(fā)布者：本站     時(shí)間：2022-03-31 10:03:22

為什么要從前端開(kāi)始著(zhù)手有三個(gè)主要原因：

這里有提升和改進(jìn)的潛力。如果能減少一半的體積，就能減少40%的響應時(shí)間
改進(jìn)前端比改進(jìn)后端需要的時(shí)間和資源更少。（改進(jìn)后端要重新設計應用程序規劃，代碼，尋找優(yōu)化代碼的方法，添加或改變硬件配置，分布式數據庫，等等）
前端的改進(jìn)在我們的工作中已經(jīng)被證實(shí)，我們在yahoo有五十個(gè)小組，在我們的最佳表現規則下，提高了他們的用戶(hù)端響應時(shí)間達到25%或更高。
我們的黃金規則是：首先優(yōu)化前端表現，這些東西耗費了用戶(hù)端響應時(shí)間中的80%。

1.減少http請求數

圖片，css，script，flash，等等這些都會(huì )增加http請求數，減少這些元素的數量能減少響應時(shí)間。

CSS Sprites技術(shù)能減少圖片的請求數，把零散的小圖片放到一起，運用background-position來(lái)改變背景圖片的位置，前提是html元素事先定義好寬高，其實(shí)就像一個(gè)遮罩，移動(dòng)背景就會(huì )看到不同的景象。

內嵌圖像  用data:URL scheme的方式把圖片內容代碼直接嵌入html代碼中，這樣會(huì )增大html代碼的體積，改進(jìn)的方式是把內嵌圖片嵌入到css中（css被緩存），這樣就會(huì )更好的減少http請求數而且不增大html的體積。

很多用戶(hù)都是在空緩存的情況下進(jìn)入你的網(wǎng)站的，這樣第一次的速度就會(huì )顯得很重要。

第一條規則是最重要的一條規則。

2.運用cdn技術(shù)

見(jiàn)： http://hi.baidu.com/axne/blog/item/258e23ade2d76f0a4b36d6d1.html

3.加一個(gè)長(cháng)時(shí)間過(guò)期的頭部

Expires: Thu, 15 Apr 2010 20:00:00 GMT
瀏覽器會(huì )用緩存來(lái)減少http請求數來(lái)加快頁(yè)面加載的時(shí)間，如果頁(yè)面頭部加一個(gè)很長(cháng)的過(guò)期時(shí)間，瀏覽器就會(huì )一直緩存頁(yè)面里的元素。
不過(guò)這樣會(huì )帶來(lái)一個(gè)問(wèn)題，就是如果頁(yè)面里的東西變動(dòng)的話(huà)就要改名字了，否則用戶(hù)端不會(huì )主動(dòng)刷新，在yahoo工作組用的是版本號，例如yahoo_2.0.6.js

4.Gzip壓縮

Gzip是現在最流行和最有效的壓縮方式，她是GNU開(kāi)發(fā)的，RFC1952標準化。
（Gzip是在服務(wù)器端壓縮圖片，css，腳本等，傳送到用戶(hù)端的瀏覽器再解壓，這樣可以提高傳輸速度，不過(guò)對服務(wù)器的壓力會(huì )增大，一般選擇部分元素壓縮比較合適。）

5.把樣式表放到頂部

我們發(fā)現把css放到文檔頭部會(huì )讓網(wǎng)頁(yè)加載得更快。因為這樣可以讓頁(yè)面逐漸加載。
把樣式表放到接近底部的問(wèn)題是它阻止了頁(yè)面元素的逐漸顯示。這樣還會(huì )導致“flash of unstyled content” 即在樣式表加載之前頁(yè)面內容是以沒(méi)有樣式的形式顯示出來(lái)的，待加載完樣式后，頁(yè)面重繪，內容一閃即改變了樣式表現。

6.把腳本放到底部

把腳本放到盡可能底部的地方，一個(gè)原因是讓頁(yè)面逐漸渲染，另一個(gè)是實(shí)現更好的并行下載。

對于腳本，腳本以下的內容被阻止逐漸加載了，因為只有當下載完腳本以后才會(huì )下載下面的內容，第二個(gè)腳本引起的問(wèn)題是阻止平行下載。 "http/1.1 specification"建議瀏覽器對一個(gè)域名， 同一時(shí)間下載數不超過(guò)2個(gè)（按：實(shí)際監測發(fā)現一般有超過(guò)2個(gè)），我曾經(jīng)讓ie并行下載100個(gè)圖片。 當腳本正在下載的時(shí)候，瀏覽器不會(huì )開(kāi)始下載任何東西。

7.避免css expressions

css expressions 是一個(gè)有力（和危險）的方式動(dòng)態(tài)的改變css的屬性。他們自ie5就開(kāi)始被支持，舉個(gè)例子，用css expression可以讓背景色每個(gè)小時(shí)輪換一次。但是被非ie瀏覽器忽略的。

background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

expressions的問(wèn)題就在與它的計算頻率絕對超出我們的想象，甚至當我們移動(dòng)鼠標，都會(huì )引起頁(yè)面的重繪！

下面是舉例頁(yè)面

減少css expressions計算次數的一個(gè)方法就是使用一次性的expressions。 當第一次expression計算出一個(gè)明確的值，就讓樣式等于這個(gè)值，不再變動(dòng)。如果樣式的屬性一定要動(dòng)態(tài)的改變，就用時(shí)間句柄吧！

8.讓腳本和樣式外延

Javascript和CSS應該是外部調用還是內嵌呢？
用外部調用文件的方式更快，因為他們是可以被緩存的，如果是內嵌在頁(yè)面中他們就無(wú)法被緩存了！想想如果用戶(hù)要在你的網(wǎng)站看很多很多的頁(yè)面，如果都是使用同一個(gè)外部腳本和樣式，那么他們一旦被緩存，就再也不需要下載了，這樣會(huì )給你帶來(lái)很大的潛在好處。

9.減少DNS查詢(xún)

10.減小腳本體積

有兩個(gè)比較流行的工具是用來(lái)減小腳本的體積的--JSMin和YUI Compressor
（按：這個(gè)壓縮和Gzip壓縮是不一樣的，Gzip是傳輸壓縮，這個(gè)是代碼壓縮）

11.避免重定向

重定向會(huì )減慢用戶(hù)體驗，它會(huì )延遲所有的東西直至到達新頁(yè)面。一個(gè)最浪費的重定向經(jīng)常會(huì )發(fā)生而我們的開(kāi)發(fā)者又會(huì )經(jīng)常忽略的就是比如http://astrology.yahoo.com/astrology的結果是重定向到http://astrology.yahoo.com/astrology/ 在A(yíng)pache里用Alias 或者mod_rewrite或者DirectorySlash解決。
從一個(gè)舊網(wǎng)站跳轉到新網(wǎng)站也是經(jīng)常要用到重定向，還有就是連接一個(gè)網(wǎng)站中的不同部分和在某些情況下（比如不同瀏覽器，不同的用戶(hù)帳號類(lèi)型，等等）的用戶(hù)導向。用重定向很簡(jiǎn)單，而且只需要一點(diǎn)額外的代碼，雖然在這些情況下用重定向減少了開(kāi)發(fā)者的復雜度，但它降低了用戶(hù)的體驗，變通的做法是用Alias和mod_rewrite如果兩個(gè)部分是在同一主機上的話(huà)，如果是由域名變更引起的重定向，變通的做法是通過(guò)Alias或mod_rewrite創(chuàng )建一個(gè)CNAME（一個(gè)DNS記錄，創(chuàng )建一個(gè)別名，從一個(gè)域名指向另一個(gè)域名）

12.去掉重復的腳本

（按：簡(jiǎn)單的說(shuō)，同一個(gè)腳本如果被調用多次，瀏覽器并不會(huì )忽略后續的腳本，而總是覆蓋加載，覆蓋運行，這樣會(huì )增加開(kāi)銷(xiāo)）

13.配置ETags

ETags（Entity tags）是服務(wù)器和瀏覽器的一個(gè)功能，它用來(lái)判斷瀏覽器緩存里的元素是否和原來(lái)服務(wù)器上的一致。ETags比last-modified date更具有彈性，它用一個(gè)獨一無(wú)二的字符串來(lái)標識一個(gè)元素的版本。
源服務(wù)器用響應頭里的ETag來(lái)特定一個(gè)元素的ETag：
       HTTP/1.1 200 OK
       Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT
       ETag: "10c24bc-4ab-457e1c1f"
       Content-Length: 12195
之后，如果瀏覽器要驗證這個(gè)元素，它就會(huì )用If-None-Match頭來(lái)回傳ETag到源服務(wù)器。如果符合的話(huà)，一個(gè)304狀態(tài)的代碼就會(huì )從源服務(wù)器返回到瀏覽器，這樣源服務(wù)器就節省了傳輸具體數據的開(kāi)銷(xiāo)。
       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"
       HTTP/1.1 304 Not Modified

用Etags的問(wèn)題就在于它會(huì )標識那個(gè)特定的服務(wù)器，如果換了服務(wù)器，Etags也就失去了原有的功能，但是這種現在在網(wǎng)絡(luò )上太常見(jiàn)了，因為我們經(jīng)常用服務(wù)器集群。默認情況下，Apache和IIS會(huì )在Etag中內嵌數據，這樣會(huì )動(dòng)態(tài)減少驗證成功的機會(huì )。

Apache1.3和2.x的ETag格式是inode-size-timestamp。雖然一個(gè)文件可能在不同服務(wù)器的同一個(gè)目錄，同樣的大小，安全級，時(shí)間戳等等，它的inode會(huì )隨著(zhù)服務(wù)器的不同而不同。

IIS5.0和6.0有同樣類(lèi)似Etags的東西，叫時(shí)間戳：ChangeNumber（更改號），更改號是一個(gè)用來(lái)追蹤IIS配置變化的計數器，ChangeNumber在不同IIS服務(wù)器之間是不一樣的。

它最終的問(wèn)題就是，IIS和Apache產(chǎn)生的Etags會(huì )在不同服務(wù)器之間無(wú)法匹配，這樣我們的瀏覽器就無(wú)法得到我們期待的304響應，而給我們的是一個(gè)普通的200響應，和正常的數據流。如果你的網(wǎng)站只有一個(gè)服務(wù)器還無(wú)所謂，如果是集群，而你用的是默認的ETag配置，你的用戶(hù)就會(huì )獲得更慢的頁(yè)面，你的服務(wù)器也會(huì )有更高的負載，消耗更大的帶寬資源，代理也無(wú)法高效緩存你的內容，甚至即使你有一個(gè)長(cháng)時(shí)間過(guò)期的頭部（按：見(jiàn)第三條規則），也不會(huì )阻止它重新載入內容。

如果你不想發(fā)揮Etags提供的這個(gè)彈性驗證模型的優(yōu)勢，你最好關(guān)掉它。Apache中關(guān)掉它的方法是在A(yíng)pache的配置文件中寫(xiě)這么一句：
FileETag none

14.讓Ajax緩存

人們會(huì )問(wèn)這些規則同樣適用于web2.0嗎？當然！這個(gè)規則是我在雅虎工作做web2.0后得出的第一條規則。

Ajax的一個(gè)好處是它會(huì )給你實(shí)時(shí)的回饋，因為它和后臺的服務(wù)器是異步傳輸的，然而，用Ajax并不能保證你的用戶(hù)不用無(wú)聊的撥弄手指頭來(lái)等待這個(gè)回饋，在很多應用中，用戶(hù)是否需要等待取決于A(yíng)jax是怎么用的，舉例說(shuō)，在一個(gè)基于網(wǎng)頁(yè)的郵件客戶(hù)端，用戶(hù)會(huì )持續等待Ajax的回饋來(lái)搜索符合他的標準的郵件信息。記住“異步”并不意味著(zhù)“實(shí)時(shí)”。讓它緩存的方式同樣是加一個(gè)過(guò)期頭部。