最佳化web前端效能的幾個方法

標籤：asc   exp   eva   htm   style   round   對象   樣式   比較   

1 減少http請求,

  a、 合并指令碼跟樣式檔案，如可以把多個 CSS 檔案合成一個，把多個 JS 檔案合成一個。

  b、 CSS Sprites 利用 CSS background 相關元素進行背景圖絕對位置,把多個圖片合成一個圖片。

2、使用瀏覽器緩衝

設定http頭中的cache-control和expires的屬性,緩衝相同的JS、CSS、圖片

3 壓縮檔

4 懶載入和預先載入 

http://www.cnblogs.com/rlann/p/7296660.html

5 script放在底部，css在頂部

6 使用CDN（contentdistribute network，內容分髮網絡）的本質仍然是一個緩衝，而且將資料緩衝在離使用者最近的地方，使使用者以最快速度擷取資料

7 使用外部的JS和CSS

外部的JS、CSS可緩衝，減少重複下載內聯的JS和CSS，減少http請求

8 切分組件到多個域 

主要的目的是提高頁面組件並行下載能力。但不要跨太多網域名稱，建議採用2個子網域名稱

 

9 精簡JS CSS 圖片

 a HTML Collection不是一個靜態結果，它表示的僅僅是一個特定的查詢，每次訪問該集合時都會重新執行這個查詢從而更新查詢結果,

當需要遍曆 HTML Collection的時候，使用使用Array.prototype.slice.call(fakeArray)將數組轉化為真正的Array對象，再訪問，以提高效能

b 慎用 with,避免使用 eval

c 字串拼接,在 Javascript中使用”+”號來拼接字串效率是比較低的，因為每次運行都會開闢新的記憶體並產生新的字串變數，然後將拼接結果賦值給新變數。與之相比更為高效的做法是使用數組的 join方法

d  CSS選擇符最佳化 #mark p{color:red}，瀏覽器對選擇符的解析是從右往左進行的，先查p再查mark

e 減少範圍鏈尋找

在迴圈中需要訪問非本範圍下的變數時請在遍曆之前用局部變數緩衝該變數，並在遍曆結束後再重寫那個變數，這一點對全域變數尤其重要，因為全域變數處於範圍鏈的最頂端，訪問時的尋找次數是最多

低效寫法：var globalVar = 1;   function myCallback(info){       for( var i = 100000; i--;){           //每次訪問 globalVar 都需要尋找到範圍鏈最頂端，本例中需要訪問 100000 次           globalVar += i;       }  }最佳化寫法：var globalVar = 1;   function myCallback(info){       //局部變數緩衝全域變數       var localVar = globalVar;       for( var i = 100000; i--;){       //訪問局部變數是最快的       localVar += i;       }       //本例中只需要訪問 2次全域變數      在函數中只需要將 globalVar中內容的值賦給localVar 中      globalVar = localVar;   } 

 

最佳化web前端效能的幾個方法