黑马程序员技术交流社区

标题: 【上海校区】前端基于浏览器存储的AJAX性能优化 [打印本页]

---

作者: 懒，羊羊    时间: 2018-8-2 20:12
标题: 【上海校区】前端基于浏览器存储的AJAX性能优化


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

   受后端开发redis启发，基于浏览器sessionStorage存储的ajax性能优化。

一.需求

   随着单页面和前后端分离的兴起，ajax已经成为大部分前后端数据交互的途径。虽然ajax是异步的，但是随着页面上的需求越来越多，进入页面后要发很多个ajax请求，这样增加了服务器的压力，用户体验也不太好。而且有很多ajax请求（如商品详情）可能每次请求返回的数据是一样的。如果用浏览器的请求缓存或者nginx的缓存都要走一下网络请求，而且缓存也不好控制。

二.解决方案

   受redis的启发，基于sessionStorage和localStorage做一套本地的key->value存取机制。用sessionStorage的好处是浏览器关闭后自己清空，防止数据一直缓存在本地。

三.具体实施（基于vue）

   1.首先写一个公共的ajax请求方法，用来运行这个机制。

[JavaScript] 纯文本查看 复制代码

Vue.prototype.$post = function(url,data={},cb){

    

}

2.在这个方法内处理sessionStorage需要的key和value。由于sessionStorage对key没有特殊的要求，所以key是用请求地址url+请求的参数data拼起来的字符串，data拼成浏览器的queryData形式

[JavaScript] 纯文本查看 复制代码

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+'&')

    }

    return s.substring(0,s.length-1)

}

3.然后开始存储过程

[JavaScript] 纯文本查看 复制代码

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下面加上一些判断取出来就行

[JavaScript] 纯文本查看 复制代码

let k = url+this.toQueryString(data);

if(sessionStorage[k]){

    cb(JSON.parse(sessionStorage[k]));

    return;

}

5.优化，错误处理

(1)众所周知，浏览器对sessionStorage最大支持是5M,大部分情况我们的ajax数据在一个session会话中不会超过那么大，但是也不能排队特殊情况。所以当sessionStorage的存储超过最大值时，需要处理一下。
原理也很简单，加一段try-catch就可以了

[JavaScript] 纯文本查看 复制代码

try{

    sessionStorage[k]=JSON.stringify(res);

}catch(e){

    sessionStorage.clear()

}

(2)升级：可以加入参数来控制sessionStorage的存储时间等

(3)有更好的功能或者优化大家也可以提出来一起探讨。

原贴链接：https://juejin.im/post/5b6169fee51d4517580e1b86

---

作者: 不二晨    时间: 2018-8-16 17:26
奈斯

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2