1.儘量減少http請求個數

• 合併圖片（如css sprites，內建圖片使用資料）、合併CSS、JS(JsCssZip)，這一點很重要，但是要考慮合併後的檔案體積。
• 可見每次請求都會帶上一些額外的資訊進行傳輸(這次請求中還沒有帶cookie)，當請求的資源很小，比如1個不到1k的圖示，可能request帶的資料比實際圖示的資料量還大。
• 所以當請求越多的時候，在網路上傳輸的資料自然就多，傳輸速度自然就慢了。

2.為檔案頭指定Expires或Cache-Control，已快取資源不再發起http請求，使內容具有快取性。

• 區分靜態內容和動態內容，避免以後頁面訪問中不必要的HTTP請求。
• 對一個網站而言，CSS、JavaScript、圖片等靜態資源更新的頻率都比較低，而這些檔案又幾乎是每次HTTP請求都需要的，如果將這些檔案快取在瀏覽器中，可以極好的改善效能。
• 通過設定http頭中的cache-control和expires的屬性，可設定瀏覽器快取，將靜態內容設為永不過期，或者很長時間後才過期。
  
  • Cache-Control
    Cache-Control屬性是在伺服器端配置的，不同的伺服器有不同的配置，apache、nginx、IIS、tomcat等配置都不盡相同。
    以Apache為例，在http.conf中做如下配置：

<filesMatch ”.(jpg|jpeg|
 
png|gif|ico)$”>  
    Header set Cache Control max-age=16768000,public  
</filesMatch>  
<filesMatch ”.(css|js)$”>  
    Header set Cache Control max-age=2628000,public  
</filesMatch>  

• 
  
  • Expires
    Expires屬性也是在服務端配置的，具體的配置也根據伺服器而定。

問題：瀏覽器快取的資源，若又想更新資源，如何實現？
解決：通過修改該資源的名稱來實現。修改了資源名稱，瀏覽器會當做不同的資源。
問題：

3.避免空的src和href

• 留意具有這兩個屬性的標籤如link，script，img，iframe等；

4.使用gzip壓縮內容

• Gzip壓縮所有可能的檔案型別以來減少檔案體積

5.把CSS放到頂部

• 實現頁面有秩序地載入，這對於擁有較多內容的頁面和網速較慢的使用者來說更為重要，同時，HTML規範清楚指出樣式表要放包含在頁面的區域內。

6.把JS放到底部

• HTTP/1.1 規範建議，瀏覽器每個主機名的並行下載內容不超過兩個，而問題在於指令碼阻止了頁面的平行下載，即便是主機名不相同。

7.避免使用CSS中expression表示式

• 頁面顯示和縮放，滾動、乃至移動滑鼠時，CSS表示式的計算頻率是我們要關注的。可以考慮一次性的表示式或者使用事件控制代碼來代替CSS表示式。

8.將CSS和JS放到外部檔案中

• 我們需要權衡內建程式碼帶來的HTTP請求減少與通過使用外部檔案進行快取帶來的好處的折中點。

9.精簡CSS和JS

• 目的就是減少下載的檔案體積，可考慮壓縮工具JSMin和YUI Compressor。

10.剔除重複的JS和CSS(程式碼的複用性)

• 重複呼叫指令碼，除了增加額外的HTTP請求外，多次運算也會浪費時間。在IE和Firefox中不管指令碼是否可快取，它們都存在重複運算JavaScript的問題。

11.使AJAX可快取

• 利用時間戳，更精巧的實現響應可快取與伺服器資料同步更新。

  avaScript 獲取當前時間戳：

  • 第一種方法：

    var timestamp = Date.parse(new Date());
    結果：1280977330000

  • 第二種方法：
    var timestamp = (new Date()).valueOf();
    結果：1280977330748

  • 第三種方法：

    var timestamp=new Date().getTime()；
    結果：1280977330748

  第一種獲取的時間戳是把毫秒改成000顯示，第二種和第三種是獲取了當前毫秒的時間戳。

12.儘早重新整理輸出緩衝

• 尤其對於css，js檔案的並行下載更有意義

13.使用GET來完成AJAX請求

• 當使用XMLHttpRequest時，瀏覽器中的POST方法是一個“兩步走”的過程：首先發送檔案頭，然後才傳送資料。在url小於2K時使用GET獲取資料時更加有意義。

14.延遲載入

• 確定頁面執行正常後，再載入指令碼來實現如拖放和動畫，或者是隱藏部分的內容以及摺疊內容等。

15.預載入

• 關注下無條件載入，有條件載入和有預期的載入。

16.儘量減少iframe的個數

• 考慮即使內容為空，載入也需要時間，會阻止頁面載入，沒有語意，注意iframe相對於其他DOM元素高出1-2個數量級的開銷，它會在典型方式下阻塞onload事件，IE和Firefox中主頁面樣式表會阻塞它的下載。

17.避免404

• HTTP請求時間消耗是很大的，有些站點把404錯誤響應頁面改為“你是不是要找*”，這雖然改進了使用者體驗但是同樣也會浪費伺服器資源（如資料庫等）。

18.減少Cookie的大小

• 去除不必要的coockie 使coockie體積儘量小以減少對使用者響應的影響，設定合理的過期時間。較早地Expire時間和不要過早去清除coockie，都會改善使用者的響應時間。

19.優化影象

• 嘗試把GIF格式轉換成PNG格式，看看是否節省空間。在所有的PNG圖片上執行pngcrush（或者其它PNG優化工具）
  利用sumsh it無失真壓縮圖片。
  其它圖片格式與PNG比較

眾所周知GIF適合圖形，JPEG適合照片，PNG系列兩種都適合。

• 相比GIF
  PNG 8除了不支援動畫外，PNG8有GIF所有的特點，但是比GIF更加具有優勢的是它支援alpha透明和更優的壓縮。所以，大多數情況下，你都應該用PNG8不是GIF（除了非常小的圖片GIF會有更好的壓縮外）。
• 相比JPEG
  JPEG比全色PNG具有更加好的壓縮，因此也使得JPEG適合照片，但是編輯JPEG過程中容易造成質量的損失，所以全色PNG適合作為編輯JPEG的過渡格式.

這樣我們在工作中就有了方向：

• 色彩豐富的、大的圖片切成jpg的；
• 尺寸小的，色彩不豐富的和背景透明的切成gif或者png8的；
• 半透明的切成png24。

20.不要在HTML中縮放影象——須權衡

• 不要為了在HTML中設定長寬而使用比實際需要大的圖片。

21.使用CDN（內容分發網路）

• 這裡可以關注CDN的三類實現：映象、快取記憶體、專線，以及智慧路由器和負載均衡。

22.避免跳轉

• 為了確保“後退”按鈕可以正確地使用，使用標準的 3XXHTTP狀態程式碼；同域中注意避免反斜槓 “/” 的跳轉；
• 跨域使用 Alias或者 mod_rewirte建立 CNAME（儲存一個域名和另外一個域名之間關係的DNS記錄）

23.配置ETags

• Entity tags（ETags）（實體標籤）是web伺服器和瀏覽器用於判斷瀏覽器快取中的內容和伺服器中的原始內容是否匹配的一種機制（“實體”就是所說的“內 容”，包括圖片、指令碼、樣式表等），是比last-modified date更更加靈活的機制，單位時間內檔案被修過多次，Etag可以綜合Inode(檔案的索引節點(inode)數)，MTime(修改時間)和Size來精準的進行判斷，避開UNIX記錄MTime只能精確到秒的問題。 伺服器叢集使用，可取後兩個引數。使用ETags減少Web應用頻寬和負載。

24.減少DOM訪問

• 快取已經訪問過的有關元素
• 線下更新完節點之後再將它們新增到文件樹中
• 避免使用JavaScript來修改頁面佈局

25.開發智慧事件處理程式

• 有時候我們會感覺到頁面反應遲鈍，這是因為DOM樹元素中附加了過多的事件控制代碼並且些事件句病被頻繁地觸發。這就是為什麼說使用event delegation（事件代理）是一種好方法了。
• 如果你在一個div中有10個按鈕，你只需要在div上附加一次事件控制代碼就可以了，而不用去為每一個按 鈕增加一個控制代碼。事件冒泡時你可以捕捉到事件並判斷出是哪個事件發出的。
• 你同樣也不用為了操作DOM樹而等待onload事件的發生。你需要做的就是等待樹結構中你要訪問的元素出現。你也不用等待所有影象都載入完畢。
• 你可能會希望用DOMContentLoaded事件來代替 事件應用程式中的onAvailable方法。

26.用代替@import

• 在IE中，頁面底部@import和使用作用是一樣的，因此最好不要使用它。

27.避免使用濾鏡

• 完全避免使用AlphaImageLoader的最好方法就是使用PNG8格式來代替，這種格式能在IE中很好地工作。如果你確實需要使用 AlphaImageLoader，請使用下劃線_filter又使之對IE7以上版本的使用者無效。

28.favicon.ico要小而且可快取

• <link href="/favicon.ico" rel="icon" type="image/x-icon" />
• favicon.ico是位於伺服器根目錄下的一個圖片檔案。它是必定存在的，因為即使你不關心它是否有用，瀏覽器也會對它發出請求，因此最好不要返回一 個404 Not Found的響應。
• 由於是在同一臺伺服器上，它每被請求一次coockie就會被髮送一次。這個圖片檔案還會影響下載順序，例如在IE中當你在 onload中請求額外的檔案時，favicon會在這些額外內容被載入前下載。
• 因此，為了減少favicon.ico帶來的弊端，要做到：檔案儘量地小，最好小於1K
• 在適當的時候（也就是你不要打算再換favicon.ico的時候，因為更換新檔案時不能對它進行重新命名）為它設定Expires檔案頭。你可以很安全地 把Expires檔案頭設定為未來的幾個月。你可以通過核對當前favicon.ico的上次編輯時間來作出判斷。
• Imagemagick可以幫你建立小巧的favicon。

29.保持單個內容小於25K

• 因為iPhone不能快取大於25K的檔案。注意這裡指的是解壓縮後的大小。
• 由於單純gizp壓縮可能達不要求，因此精簡檔案就顯得十分重要。

30.打包元件成複合文字

• 頁面內容打包成複合文字就如同帶有多附件的Email，它能夠使你在一個HTTP請求中取得多個元件（切記：HTTP請求是很奢侈的）。當你使用這條規則時，首先要確定使用者代理是否支援（iPhone就不支援）。