高性能表現(xiàn)的div+css網(wǎng)站_Web標(biāo)準(zhǔn)教程

      編輯Tag賺U幣
      教程Tag:暫無(wú)Tag,歡迎添加,賺取U幣!

      從2004年開(kāi)始,我開(kāi)始進(jìn)入雅虎的異常表現(xiàn)小組。我們是一個(gè)很小的隊(duì)伍,專(zhuān)門(mén)針對(duì)雅虎的產(chǎn)品進(jìn)行質(zhì)量檢測(cè)和改進(jìn),我作為一個(gè)后端工程師,現(xiàn)在卻開(kāi)始搗鼓前端代碼優(yōu)化方面的工程,所以我認(rèn)為這是一個(gè)極好的進(jìn)步的機(jī)會(huì)。我的目標(biāo)是改進(jìn)用戶(hù)端體驗(yàn),我度量了在各個(gè)帶寬下瀏覽器的響應(yīng)時(shí)間,得出如下的一個(gè)圖表,它展示了來(lái)自http://yahoo.com的http的流量。

      以上圖標(biāo)的第一個(gè)標(biāo)簽就是html,是一個(gè)html文檔最開(kāi)始加載的東東,在這個(gè)例子中,讀取html代碼只占了整個(gè)響應(yīng)時(shí)間中的5%,這個(gè)結(jié)果適用于絕大多數(shù)網(wǎng)站,在采樣美國(guó)的前十位網(wǎng)站中,只有一家超過(guò)5%但少于20%,其余80%的時(shí)間是用來(lái)讀取網(wǎng)頁(yè)其他內(nèi)容的,也就是說(shuō),前端(原文是front-end,意思就是不包括html代碼的其余內(nèi)容,可以是圖片,腳本,flash,視頻,各種東西)。這就是為什么我們要把目光集中在這些東西來(lái)提高顯示速度的關(guān)鍵原因。

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

      1、這里有提升和改進(jìn)的潛力。如果能減少一半的體積,就能減少40%的響應(yīng)時(shí)間

      2、改進(jìn)前端比改進(jìn)后端需要的時(shí)間和資源更少。(改進(jìn)后端要重新設(shè)計(jì)應(yīng)用程序規(guī)劃,代碼,尋找優(yōu)化代碼的方法,添加或改變硬件配置,分布式數(shù)據(jù)庫(kù),等等)

      3、前端的改進(jìn)在我們的工作中已經(jīng)被證實(shí),我們?cè)趛ahoo有五十個(gè)小組,在我們的最佳表現(xiàn)規(guī)則下,提高了他們的用戶(hù)端響應(yīng)時(shí)間達(dá)到25%或更高。

      我們的黃金規(guī)則是:首先優(yōu)化前端表現(xiàn),這些東西耗費(fèi)了用戶(hù)端響應(yīng)時(shí)間中的80%。

      1、減少http請(qǐng)求數(shù)

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

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

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

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

      第一條規(guī)則是最重要的一條規(guī)則。

      2、運(yùn)用cdn技術(shù)

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

      3、加一個(gè)長(zhǎng)時(shí)間過(guò)期的頭部

      Expires: Thu, 15 Apr 2010 20:00:00 GMT

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

      4、Gzip壓縮

      Gzip是現(xiàn)在最流行和最有效的壓縮方式,她是GNU開(kāi)發(fā)的,RFC1952標(biāo)準(zhǔn)化。

      (Gzip是在服務(wù)器端壓縮圖片,css,腳本等,傳送到用戶(hù)端的瀏覽器再解壓,這樣可以提高傳輸速度,不過(guò)對(duì)服務(wù)器的壓力會(huì)增大,一般選擇部分元素壓縮比較合適。)

      5、把樣式表放到頂部

      我們發(fā)現(xiàn)把css放到文檔頭部會(huì)讓網(wǎng)頁(yè)加載得更快。因?yàn)檫@樣可以讓頁(yè)面逐漸加載。

      把樣式表放到接近底部的問(wèn)題是它阻止了頁(yè)面元素的逐漸顯示。這樣還會(huì)導(dǎo)致“flash of unstyled content” 即在樣式表加載之前頁(yè)面內(nèi)容是以沒(méi)有樣式的形式顯示出來(lái)的,待加載完樣式后,頁(yè)面重繪,內(nèi)容一閃即改變了樣式表現(xiàn)。

      6、把腳本放到底部

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

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

      7、避免css expressions

      css expressions 是一個(gè)有力(和危險(xiǎn))的方式動(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)題就在與它的計(jì)算頻率絕對(duì)超出我們的想象,甚至當(dāng)我們移動(dòng)鼠標(biāo),都會(huì)引起頁(yè)面的重繪!

      下面是舉例頁(yè)面

      減少css expressions計(jì)算次數(shù)的一個(gè)方法就是使用一次性的expressions。 當(dāng)?shù)谝淮蝒xpression計(jì)算出一個(gè)明確的值,就讓樣式等于這個(gè)值,不再變動(dòng)。如果樣式的屬性一定要?jiǎng)討B(tài)的改變,就用時(shí)間句柄吧!

      8、讓腳本和樣式外延

      Javascript和CSS應(yīng)該是外部調(diào)用還是內(nèi)嵌呢?

      用外部調(diào)用文件的方式更快,因?yàn)樗麄兪强梢员痪彺娴模绻莾?nèi)嵌在頁(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ù)體驗(yàn),它會(huì)延遲所有的東西直至到達(dá)新頁(yè)面。一個(gè)最浪費(fèi)的重定向經(jīng)常會(huì)發(fā)生而我們的開(kāi)發(fā)者又會(huì)經(jīng)常忽略的就是比如http://astrology.yahoo.com/astrology的結(jié)果是重定向到http://astrology.yahoo.com/astrology/ 在Apache里用Alias 或者mod_rewrite或者DirectorySlash解決。

      從一個(gè)舊網(wǎng)站跳轉(zhuǎn)到新網(wǎng)站也是經(jīng)常要用到重定向,還有就是連接一個(gè)網(wǎng)站中的不同部分和在某些情況下(比如不同瀏覽器,不同的用戶(hù)帳號(hào)類(lèi)型,等等)的用戶(hù)導(dǎo)向。用重定向很簡(jiǎn)單,而且只需要一點(diǎn)額外的代碼,雖然在這些情況下用重定向減少了開(kāi)發(fā)者的復(fù)雜度,但它降低了用戶(hù)的體驗(yàn),變通的做法是用Alias和mod_rewrite如果兩個(gè)部分是在同一主機(jī)上的話(huà),如果是由域名變更引起的重定向,變通的做法是通過(guò)Alias或mod_rewrite創(chuàng)建一個(gè)CNAME(一個(gè)DNS記錄,創(chuàng)建一個(gè)別名,從一個(gè)域名指向另一個(gè)域名)

      12、去掉重復(fù)的腳本

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

      13、配置ETags

      ETags(Entity tags)是服務(wù)器和瀏覽器的一個(gè)功能,它用來(lái)判斷瀏覽器緩存里的元素是否和原來(lái)服務(wù)器上的一致。ETags比last-modified date更具有彈性,它用一個(gè)獨(dú)一無(wú)二的字符串來(lái)標(biāo)識(shí)一個(gè)元素的版本。

      源服務(wù)器用響應(yīng)頭里的ETag來(lái)特定一個(gè)元素的ETag:

      以下為引用的內(nèi)容:
             HTTP/1.1 200 OK
             Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT
             ETag: "10c24bc-4ab-457e1c1f"
             Content-Length: 12195

      之后,如果瀏覽器要驗(yàn)證這個(gè)元素,它就會(huì)用If-None-Match頭來(lái)回傳ETag到源服務(wù)器。如果符合的話(huà),一個(gè)304狀態(tài)的代碼就會(huì)從源服務(wù)器返回到瀏覽器,這樣源服務(wù)器就節(jié)省了傳輸具體數(shù)據(jù)的開(kāi)銷(xiāo)。

      以下為引用的內(nèi)容:
             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ì)標(biāo)識(shí)那個(gè)特定的服務(wù)器,如果換了服務(wù)器,Etags也就失去了原有的功能,但是這種現(xiàn)在在網(wǎng)絡(luò)上太常見(jiàn)了,因?yàn)槲覀兘?jīng)常用服務(wù)器集群。默認(rèn)情況下,Apache和IIS會(huì)在Etag中內(nèi)嵌數(shù)據(jù),這樣會(huì)動(dòng)態(tài)減少驗(yàn)證成功的機(jī)會(huì)。

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

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

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

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

      FileETag none

      14、讓Ajax緩存

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

      Ajax的一個(gè)好處是它會(huì)給你實(shí)時(shí)的回饋,因?yàn)樗秃笈_(tái)的服務(wù)器是異步傳輸?shù)模欢肁jax并不能保證你的用戶(hù)不用無(wú)聊的撥弄手指頭來(lái)等待這個(gè)回饋,在很多應(yīng)用中,用戶(hù)是否需要等待取決于Ajax是怎么用的,舉例說(shuō),在一個(gè)基于網(wǎng)頁(yè)的郵件客戶(hù)端,用戶(hù)會(huì)持續(xù)等待Ajax的回饋來(lái)搜索符合他的標(biāo)準(zhǔn)的郵件信息。記住“異步”并不意味著“實(shí)時(shí)”。讓它緩存的方式同樣是加一個(gè)過(guò)期頭部。

      按:

      粗略的譯了一下,并非逐字的翻譯,就是讓大家有所了解了,翻譯不好的地方請(qǐng)見(jiàn)諒!

      上面那個(gè)圖大家可以在firebug(firefox下運(yùn)行)的net選項(xiàng)卡中獲得服務(wù)器的響應(yīng)數(shù)據(jù)!

      基于以上規(guī)則,yahoo出了一個(gè)延伸firebug插件的插件。在這里下載:

      http://developer.yahoo.com/yslow/

      來(lái)源:模板無(wú)憂(yōu)//所屬分類(lèi):Web標(biāo)準(zhǔn)教程/更新時(shí)間:2008-02-25
      相關(guān)Web標(biāo)準(zhǔn)教程