根據(jù)相關(guān)網(wǎng)站統(tǒng)計(jì)分析，在采樣美國(guó)的前10的網(wǎng)站中，只有一家超過5但少于20，其他80的時(shí)間是用來讀取網(wǎng)頁其他內(nèi)容的，也就是說，前端（原文是front-end，意思就是不包括html代碼的其余內(nèi)容，可以

根據(jù)相關(guān)網(wǎng)站統(tǒng)計(jì)分析，在采樣美國(guó)的前10的網(wǎng)站中，只有一家超過5但少于20，其他80的時(shí)間是用來讀取網(wǎng)頁其他內(nèi)容的，也就是說，前端（原文是front-end，意思就是不包括html代碼的其余內(nèi)容，可以是圖片，腳本，flash，視頻，各種東西）。這就是為什么我們要把目光集中在這些東西來提高顯示速度的關(guān)鍵原因。

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

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

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

3、前端的改進(jìn)在我們的工作中已經(jīng)被證實(shí)，提高了他們的用戶端響應(yīng)時(shí)間達(dá)到25或更高。

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

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

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

CSS Sprites技術(shù)能減少圖片的請(qǐng)求數(shù)，把零散的小圖片放到一起，運(yùn)用background-position來改變背景圖片的位置，前提是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ī)則。

2、運(yùn)用cdn網(wǎng)絡(luò)加速技術(shù)

見： http://hi.baidu.com/axne/blog/item/258e23ade2d76f0a4b36d6d1.html

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

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

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

4、Gzip數(shù)據(jù)壓縮技術(shù)

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

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

5、樣式表放到頂部

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

把樣式表放到接近底部的問題是它