1.減少HTTP請求

一個正常HTTP請求的流程簡述：如在瀏覽器中輸入”www.xxxxxx.com”並按下回車，瀏覽器再與這個URL指向的伺服器建立連線，然後瀏覽器才能向伺服器傳送請求資訊，伺服器在接受到請求的資訊後再返回相應的資訊，瀏覽器接收到來自伺服器的應答資訊後，對這些資料解釋執行。

如果網頁中有很多圖片，css，js資訊，將會頻繁的語伺服器建立連線和釋放連線，必然會造成資源浪費。

網速相同的條件下，下載一個100KB的圖片比下載兩個50KB的圖片要快。所以，請減少HTTP請求。

解決辦法：

合併圖片（css sprites）,合併css和js檔案，圖片較多的頁面可以使用lazyLoad等技術進行優化
從設計層面簡化頁面
合理設定HTTP快取：當瀏覽器沒有快取的時候訪問訪問一個網頁（**）一共發出78個請求，共600K資料，而當第二次即瀏覽器已經快取之後訪問僅有10個請求。（直接F5重新整理頁面的話效果是不一樣的，這種情況下請求還是一樣，不過被快取資源的請求伺服器是304響應。只有header沒有body，可以節省頻寬）

2. 正確理解repaint和reflow

repaint意思是重繪，reflow意思是重排。

重繪就是一個元素的外觀被改變，但是沒有改變佈局（寬高）的情況下，如改變visibility,outline,背景色等等。

重排就是DOM的變化影響到了元素的幾何屬性（寬和高），瀏覽器會重新計算元素的幾何屬性，會使渲染樹中受到影響的部分失效，瀏覽器會驗證DOM樹上所有其他結點的visibility屬性，這也是reflow低效的原因。如：改變視窗的大小，改變文字大小，內容的改變，瀏覽器視窗的變化，style屬性的改變等。

解決辦法：

設定style屬性改變結點樣式的話，每設定一次都會導致一次reflow，所以最好通過設定class的方式。有動畫效果的元素，它的position屬性應當設為fixed或absolute，這樣不會影響其他元素的佈局。

3 減少DOM的操作

在《高效能JavaScript》中這麼比喻：把DOM看成一個島嶼，javascript看成另一個島嶼，兩者之間以一座收費橋連線。所以每次訪問DOM都會交過路費，訪問的次數越多，交的費用越多。

解決辦法：
修改和訪問DOM元素會造成頁面的重繪和重排。合理使用javascript變數儲存內容，考慮大量DOM元素中迴圈的效能開銷，所以在迴圈結束時一次性寫入。
減少對DOM元素的查詢和修改，查詢時可將 其賦值給區域性變數。

4 使用JSON格式來進行資料交換

JSON是一種輕量級的資料交換格式，採用完全獨立於語言的文字格式，是理想的資料交換格式。

5 高效使用HTML標籤和CSS樣式

6 使用CDN加速（內容分發網路）

7 將CSS和JS放在外部檔案中引用，css放在head部分，js放在body的末尾

<script>每次出現都會讓頁面等待指令碼的解析和執行（不論JavaScript是內嵌的還是外鏈的），JavaScript程式碼執行完成後，才繼續渲染頁面。這個也就是JavaScript的阻塞特性。
　因為這個阻塞的特點，建議把JavaScript程式碼放到</body>標籤以前，這樣既能有效的防止JavaScript的阻塞，又能使得頁面的HTML結構能更快的釋放。

8 精簡CSS和JS檔案

CSS和JavaScript的壓縮，直接減少下載的檔案體積。

9 要鎖圖片和使用圖片sprite技術

一般的圖片壓縮的方式有：縮小圖片的解析度，改變圖片格式，降低圖片儲存質量。

圖片精靈（css sprite）就是把許多圖片放到一張大圖片裡面，通過css來顯示圖片的一部分。

10 注意控制cookie大小和汙染

 因為Cookie是本地的磁碟檔案，每次瀏覽器都會去讀取相應的Cookie，所以建議去除不必要的Cookie，使Cookie體積儘量小以減少對使用者響應的影響；

　　使用Cookie跨域操作時注意在適應級別的域名上設定coockie以便使子域名不受其影響

　　Cookie是有生命週期的，所以請注意設定合理的過期時間，合理地Expire時間和不要過早去清除coockie，都會改善使用者的響應時間。