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

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

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

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

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

3、前端的改進在我們的工作中已經被證實，提高了他們的用戶端響應時間達到25或更高。

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

1、減少http請求

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

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

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

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

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

2、運用cdn網(wǎng)絡加速技術

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

3、加一個長時間過期的頭部

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

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

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

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

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

5、樣式表放到頂部

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

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