前端性能優化小結

1.減小http請求：

 css sprite；

css、js文件合併壓縮 

CDN託管

網頁Gzip壓縮

圖片服務器

圖片延遲加載

小圖標用iconfont 

小圖片用base64

data緩存

前端模板 JS+數據，減小因爲HTML標籤致使的帶寬浪費，前端用變量保存AJAX請求結果，每次操做本地變量，不用請求，減小請求次數

css：

避免使用CSS Expression

 當須要設置的樣式不少時設置className而不是直接操做style

合併代碼，如margin-top margin-left 合爲margin

 

js： 

    -用innerHTML代替DOM操做，減小DOM操做次數，優化javascript性能

   -用hash-table來優化查找

    -少用全局變量，減小做用域鏈查找。將全局變量用局部變量保存起來

     eg:(此例子中須要查找所有變量兩次)

     

var galobalVal = 1;

function callFn(info){
  //用局部變量緩存全局變量
  var localVal = galobalVal ;
  //do sth ...
 
  //將新值賦值回來
  galobalVal = localVal ;
}

 -緩存DOM節點查找的結果, 如 var imgs = doc.getElementByTagName("name")

//document是全局查找
function updateUI(){
    var doc = document;//用局部變量 緩存起來
    var imgs = doc.getElementByTagName("name");//用局部變量 緩存起來
    for (var i = imgs.length - 1; i >= 0; i--) {
        imgs[i].title = doc.title + " image " + i;
    }
    var msg = doc.getElementByTagName("msg"); //用局部變量 緩存起來
    msg.innerHTML = "update complete";
}

   

   -把一些共同、功能類似 的代碼抽取成方法 減小代碼重複率

  -字符串拼接：在js中用+來拼接字符串效率比較低，由於每次運行都會開闢新的內存並生成新的字符串變量，而後加你個拼接結果賦值給新變量。與之相比，更爲高效的作法是使用數組：即將須要拼接的字符串放在數組中,最後調用join()。不過使用數組也有必定開銷，所以當須要拼接 的字符串較多時能夠考慮此方法。

   -模板

  - -儘可能使用內置函數，使用原生方法：由於內置函數（原生方法）是經過c、c++之類的編譯語言編譯到瀏覽器中的，比js快不少。如Math中複雜的數學運算。

html：

  -減小層級嵌套

  -避免在頁面的主體佈局中使用table，table要等其中的內容徹底下載以後纔會顯示出來，顯示比div+css佈局慢

 --------------------如下來自《JavaScript高級程序設計》--------------------------

1.避免沒必要要的屬性查找

  算法複雜度O,最快捷的算法是常數值，即O(1),算法越複雜 運行所需時間越長。

  查找變量和訪問數組數組元素都是O(1)

 訪問對象屬性是O(n)，（）使用變量和數組都比訪問對象的屬性更有效率，由於必須在原型鏈上對擁有該名稱 的屬性進行一次搜索。屬性越多，屬性查找時間越長

  所以一旦屢次用到對象屬性，應該將其存儲在局部變量中，第一次訪問是O(n)，但後面都會是O(1)。

2.優化循環

  1）減值迭代

  2）簡化終止條件,避免屬性查找或其餘O(n)，如  i<values.length,在循環時每次都是算一下values.length。能夠改成減值迭代

  3）簡化循環體

  4）使用後測試循環體

   減值迭代：   

for (var i = values.length - 1; i >= 0; i--) {
       var value = values[i]
       process(value) ;
 }

 後測試循環體：do-while,能夠避免最初終值的計算，運行更快。但需注意確保處理的值至少有一個

var i = values.length - 1;
if(i >-1){
   do {
     process(values[i]) ;
   }while( --i >= 0)
}

3.展開循環

  當循環次數肯定，消除循環並使用屢次函數調用則更快。

//消除循環 
process(values[0]) ;
process(values[1]) ;
process(values[2]) ;

性能的其餘注意事項：

 1.使用原生方法

 2.switch語句較快。如果有一系列複雜的if else語句，能夠轉爲switch

3.位運算符較快。 當進行數學運算時，位運算比布爾運算或算術要運算快。取模 邏輯與 邏輯或均可以考慮位運算實現

---------------------

與get請求相比，post請求消耗的資源會更多一些。

從性能角度看，以發送相同的數據計，get請求的速度最多可打到post請求的兩倍。