前端基于浏览器存储的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的效果图
转载于:https://juejin.im/post/5b6169fee51d4517580e1b86
前端基于浏览器存储的AJAX性能优化相关推荐
- 如何从8 道面试题中,看出浏览器渲染过程与性能优化
前言 移动互联网时代,用户对于网页的打开速度要求越来越高.百度用户体验部研究表明,页面放弃率和页面的打开时间关系如下图 所示. 根据百度用户体验部的研究结果来看,普通用户期望且能够接受的页面加载时间在 ...
- 浏览器渲染原理以及性能优化
浏览器渲染原理以及性能优化 浏览器渲染原理 进程与线程 Request请求阶段 Response响应阶段 浏览器渲染网页注意事项 浏览器渲染网页阻塞顺序 DOM的重绘和回流 Repaint & ...
- web前端开发,如何提高页面性能优化?
web前端开发,如何提高页面性能优化? 内容方面 减少HTTP请求次数 减少DOM操作 减少DNS查询 使用Ajax 可缓存 css方面 把css样式HTML代码页的上端 从页面中分离css代码,从外 ...
- Tair LDB基于Prefixkey的范围查找性能优化项目中期总结
"Tair LDB基于Prefixkey的范围查找性能优化"这个项目刚好进行了一个月,这一个月主要是熟悉项目.掌握项目和提出设计方案的过程,下面从几个方面总结下个人在该项目上所做的 ...
- Tair LDB基于Prefixkey的范围查找性能优化项目测试及完成总结报告
项目这周就截止了,这算是我第一个有导师指导的真正意义上的C++项目,项目基本完成,想要实现的功能也已经实现,并做了大量的性能测试.不过这对于业界来说,可能完成的还不够成熟,还有许多待改进的地方,还不能 ...
- 【华为云技术分享】前端工程师必备:从浏览器的渲染到性能优化
摘要:本文主要讲谈及浏览器的渲染原理.流程以及相关的性能问题. 问题前瞻 1. 为什么css需要放在头部?2. js为什么要放在body后面?3. 图片的加载和渲染会阻塞页面DOM构建吗?4. dom ...
- js重新渲染div_前端工程师必备:从浏览器的渲染到性能优化
文章来自:华为云开发者社区 摘要:本文主要讲谈及浏览器的渲染原理.流程以及相关的性能问题. 问题前瞻 1. 为什么css需要放在头部? 2. js为什么要放在body后面? 3. 图片的加载和渲染会阻 ...
- 【前端性能优化】浏览器渲染原理与性能优化
目录 1. 浏览器渲染基本步骤 2. 构建DOM树.CSSOM树 3. 构建渲染树 4. 计算渲染树的布局 5. 将布局渲染到屏幕上 6. 渲染优化 1. 浏览器渲染基本步骤 浏览器主要有以下步骤: ...
- 前端缓存 浏览器存储
目录 前言 一.浏览器存储 0.bfcache 1.WebStorage (1).sessionStorage 对象 (2).localStorage 对象 2.Cookie (1).cookie 与 ...
最新文章
- R语言使用pwr包的pwr.r.test函数对相关信息分析进行效用分析(power analysis)、在已知效应量(effect size)、显著性水平、效用值的情况下计算需要的样本量
- android6.0 百度地图,Android百度地图SDK 导航SDK2.0结合定位SDK6.0.5的导航参数设置方法...
- 外贸必备!各国进口关税查询网站大全!
- sklear多项式回归
- [html] 写一个三栏布局,两边固定,中间自适应
- 【Loj - 515】贪心只能过样例(暴力,或01背包 + bitset)
- Android项目开发填坑记-so文件引发的攻坚战
- atitit.插件体系设计总结o73.doc
- VC6.0多行注释快捷键的设置
- api 与 implement 的区别
- matlab中simulink无法打开,【转】Simulink打不开的解决办法
- bzoj2109: [Noi2010]Plane 航空管制
- 深入理解操作系统实验——bomb lab(secret_phase)
- 【无标题】人工智能的定义
- Mysql数据库【触发器】
- FileProvider
- 我与CSDN的2020
- Kotlin学习(7):返回和跳转
- 用Oracle PL/SQL 编程实现小数转分数的方法
- idea运行的时候出现的问题Exception in thread “main” java.lang
热门文章
- 《精通自动化测试框架设计》—第2章 2.3节测试数据交互基本方法
- oracle 10g rac重建crs
- 将一个MapString, String写入properties文件,并且覆盖原来的内容
- mysql 随机数范围取值
- ExtJS在树TreePanel之间拖放结点
- 建立可扩展的silverlight应用框架 step-7 final
- python中登录、注册操作数据库
- [SimpleOJ238]宝藏探寻
- LDAP 中 CN, OU, DC 的含义(ldap学习一)
- 视频监控为校园安全插上“隐形的翅膀”