前端基于浏览器存储的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的效果图