前端基於瀏覽器存儲的AJAX性能優化

受後端開發redis啓發，基於瀏覽器sessionStorage存儲的ajax性能優化。

一.需求

隨着單頁面和先後端分離的興起，ajax已經成爲大部分先後端數據交互的途徑。雖然ajax是異步的，可是隨着頁面上的需求愈來愈多，進入頁面後要發不少個ajax請求，這樣增長了服務器的壓力，用戶體驗也不太好。並且有不少ajax請求（如商品詳情）可能每次請求返回的數據是同樣的。若是用瀏覽器的請求緩存或者nginx的緩存都要走一下網絡請求，並且緩存也很差控制。

二.解決方案

受redis的啓發，基於sessionStorage和localStorage作一套本地的key->value存取機制。用sessionStorage的好處是瀏覽器關閉後本身清空，防止數據一直緩存在本地。

三.具體實施（基於vue）

1.首先寫一個公共的ajax請求方法，用來運行這個機制。

Vue.prototype.$post = function(url,data={},cb){
    
}
複製代碼

2.在這個方法內處理sessionStorage須要的key和value。因爲sessionStorage對key沒有特殊的要求，因此key是用請求地址url+請求的參數data拼起來的字符串，data拼成瀏覽器的queryData形式

Vue.prototype.$post = function(url,data={},cb){
    let k = url+this.toQueryString(data);
}
Vue.prototype.toQueryString =function(data){
    let s = '';
    for(var i in data){
        s+=(i+'='+data[i]+'&')
    }
    return s.substring(0,s.length-1)
}
複製代碼

3.而後開始存儲過程

Vue.prototype.$post = function(url,data={},cb){
    let k = url+this.toQueryString(data);
    /*vue-resource的ajax請求*/
    Vue.http.post(url,data,{
        timeout:60000
    }).then(res=>{
         /*只存儲請求成功的請求*/
        if(res.body.code===10000000){
            sessionStorage[k]=JSON.stringify(res);
        }
        cb(res.body);
    })
}
複製代碼

原諒咱們以前的框架有點舊，ajax用的仍是回調。
這樣簡單的存儲過程就完成了。
4.讀取過程
在k下面加上一些判斷取出來就行

let k = url+this.toQueryString(data);
if(sessionStorage[k]){
    cb(JSON.parse(sessionStorage[k]));
    return;
}
複製代碼

5.優化，錯誤處理
(1)衆所周知，瀏覽器對sessionStorage最大支持是5M,大部分狀況咱們的ajax數據在一個session會話中不會超過那麼大，可是也不能排隊特殊狀況。因此當sessionStorage的存儲超過最大值時，須要處理一下。
原理也很簡單，加一段try-catch就能夠了

try{
    sessionStorage[k]=JSON.stringify(res);
}catch(e){
    sessionStorage.clear()
}
複製代碼

(2)升級：能夠加入參數來控制sessionStorage的存儲時間等
(3)有更好的功能或者優化你們也能夠提出來一塊兒探討。

附上一張sessionStorage的效果圖