前端基于浏览器存储的AJAX性能优化

1,227 阅读2分钟

受后端开发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的效果图