|
原文：http://developer.yahoo.com/performance/rules.html
2007.3.20 Steve Souders
Translated by mask
從2004年開(kāi)始，我開(kāi)始進(jìn)入雅虎的異常表現(xiàn)小組。我們是一個(gè)很小的隊(duì)伍，專門針對(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)用戶端體驗(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è)主要原因：
- 這里有提升和改進(jìn)的潛力。如果能減少一半的體積，就能減少40%的響應(yīng)時(shí)間
- 改進(jìn)前端比改進(jìn)后端需要的時(shí)間和資源更少。（改進(jìn)后端要重新設(shè)計(jì)應(yīng)用程序規(guī)劃，代碼，尋找優(yōu)化代碼的方法，添加或改變硬件配置，分布式數(shù)據(jù)庫(kù)，等等）
- 前端的改進(jìn)在我們的工作中已經(jīng)被證實(shí)，我們?cè)趛ahoo有五十個(gè)小組，在我們的最佳表現(xiàn)規(guī)則下，提高了他們的用戶端響應(yīng)時(shí)間達(dá)到25%或更高。
我們的黃金規(guī)則是：首先優(yōu)化前端表現(xiàn)，這些東西耗費(fèi)了用戶端響應(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的體積。
很多用戶都是在空緩存的情況下進(jìn)入你的網(wǎng)站的，這樣第一次的速度就會(huì)顯得很重要。
第一條規(guī)則是最重要的一條規(guī)則。
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁(yè) 下一頁(yè) 高性能表現(xiàn)的網(wǎng)站 [2]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 高性能表現(xiàn)的網(wǎng)站 [1]
第 2 頁(yè) 
