日期:2013-6-28 来源:GBin1.com
上一篇我们介绍了前端性能优化:高频执行事件/方法的防抖,这篇我们将介绍前端性能优化:网络存储的静态缓存和非必要内容优化。
Web Storage的API曾经是Cookie API一个显著的进步,并且为开发者使用了很多年了。这个API是合理的,更大存储量的,而且是更为健全理智的。一种策略是去使用Session存储来存 储非必要的,更为静态的内容,例如侧边栏的HTML内容,从Ajax加载进来的文章内容,或者一些其他的各种各样的片断,是我们只想请求一次的。
我们可以使用JavaScript编写一段代码,利用Web Storage使这些内容加载更加简单:
define(function() { var cacheObj = window.sessionStorage || { getItem: function(key) { return this[key]; }, setItem: function(key, value) { this[key] = value; } }; return { get: function(key) { return this.isFresh(key); }, set: function(key, value, minutes) { var expDate = new Date(); expDate.setMinutes(expDate.getMinutes() + (minutes || 0)); try { cacheObj.setItem(key, JSON.stringify({ value: value, expires: expDate.getTime() })); } catch(e) { } }, isFresh: function(key) { // 返回值或者返回false var item; try { item = JSON.parse(cacheObj.getItem(key)); } catch(e) {} if(!item) return false; // 日期算法 return new Date().getTime() > item.expires ? false : item.value; } } });
这个工具提供了一个基础的get和set方法,同isFresh方法一样,保证了存储的数据不会过期。调用方法也非常简单: ......
下一篇中,我们会讲述使用同步加载来优化你的前端性能.
相关阅读:
via Nelly@极客社区
相关推荐
cooked_rice:静态资源前端存储解决方案策略链接文档屏幕快照快速入门对于那些需要缓存的资源,您没有bowl.js:cooked_rice:静态资源前端存储解决方案策略链接文档屏幕快照快速入门对于那些资源需要缓存的内容,则不必...
10.1 数据库的前端缓存区 10.2 使用memcached 10.3 读操作缓存 10.4 写操作缓存 10.5 监控状态 10.6 缓存扩展 第11章 数据库性能优化 11.1 友好的状态报告 11.2 正确使用索引 11.3 锁定与等待 11.4 事务性...
10.1 数据库的前端缓存区 10.2 使用memcached 10.3 读操作缓存 10.4 写操作缓存 10.5 监控状态 10.6 缓存扩展 第11章 数据库性能优化 11.1 友好的状态报告 11.2 正确使用索引 11.3 锁定与等待 11.4 事务...
10.1 数据库的前端缓存区 10.2 使用memcached 10.3 读操作缓存 10.4 写操作缓存 10.5 监控状态 10.6 缓存扩展 第11章 数据库性能优化 11.1 友好的状态报告 11.2 正确使用索引 11.3 锁定与等待 11.4 事务...
web 前端性能优化 浏览器优化 减少http请求 使用浏览器缓存 启用压缩 css上,js下 减少cookie传输, 静态资源使用独立域名访问 CDN加速 反向代理 应用服务器性能优化 分布式缓存 缓存的...
4、内置网站优化功能SEO优化:系统后台可以设置伪静态、设置HTML静态缓存策略、搜索引擎优化设置、常用搜索引擎登录入口、生成网站地图、生成关键词内链、百度自动推送 功能模块: 功能列表 核心功能:电脑站、手机...
4、内置网站优化功能SEO优化:系统后台可以设置伪静态、设置HTML静态缓存策略、搜索引擎优化设置、常用搜索引擎登录入口、生成网站地图、生成关键词内链、百度自动推送 功能模块: 功能列表 核心功能:电脑站、手机...
这是一个高级工具,支持qpm和git软件包存储库,并提供了许多功能以使使用尽可能容易。 主要特点是: 全局源缓存,以减少下载 在本地预编译软件包以加快构建速度而且还支持直接使用源进行构建 完全跨平台 可以在Qt...
使用spring-jms 负载均衡:nginx 搜索:solr集群(solrCloud),配合zookeeper搭建, 使用spring-data-solor 缓存:redis集群,使用spring-data-redis 图片存储:fastDFS集群 网页静态化:freemarker 单点登录:cas ...
6.缓存功能:模板缓存,数据库缓存,网站页面缓存 7.友情链接:支持图片链接和文字链接 8.广告模块:只要后台添加广告后,全部js生成到前台,让你不用费事修改模板 9.采集功能,我们支持火车头采集,火车头接口...
缓存:Redis的的集群,使用弹簧数据redis的的 图片存储:fastDFS集群 | |网页静态化: freemarker的 单点登录:cas 权限管理:SpringSecurity, 跨域:cros 支付:微信扫描 短信验证:阿里大于 密码加密:BCrypt ...
Activemq,使用spring-jms 负载均衡:nginx 搜索:solr集群(solrCloud),配合zookeeper搭建, 使用spring-data-solor 缓存:redis集群,使用spring-data-redis 图片存储:fastDFS集群 网页静态化:freemarker 单点...
缓存:redis集群,使用spring-data-redis 图片存储:fastDFS集群 网页静态化:freemarker 单点登录:cas 权限管理:SpringSecurity, 跨域:cros 支付:微信扫描 短信验证:阿里大于 密码加密:BCrypt 富文本:...
缓存功能:模板缓存,数据库缓存,网站页面缓存7.友情链接:支持图片链接和文字链接8.广告模块:只要后台添加广告后,全部js生成到前台,让你不用费事修改模板9.采集功能,我们支持火车头采集,火车头接口已经在插件...
│ 第56节:Varnish对性能的提升和优化.avi │ 第57节:应用上Varnish后的体系结构.avi │ 第58节:Memcached入门和缓存的含义.avi │ 第59节:Memcached基本的工作原理.avi │ 第60节:Memcached基本的操作命令.avi...
每一个模块存储数据与内容数据完全分开,即便你有很多的内容数据也一样可以轻松面对, 数据调用能够让你随心所欲的调用你所添加的任何内容,定时更新,内容缓存,模板套用 二次开发者可以对数据调用模块的方法进行...
问题是,有时前端资源存储在静态资源服务器上,您没有很好的配置来提供 ETag 或其他缓存控制的东西。 升级后,静态服务器提供以前版本的模板,因为她不知道更改。 从前端的角度来看,这个问题很容易解决。 每次应用...
一,这是个什么的项目? 基于Node.js Koa2实战开发的一套...使用了CND加速,静态文件存储在七牛服务器上 ejs服务端渲染尽量减少文件的约会,减少对DOM的操作,并封装使用了图片懒加载,事件防抖和节流控制浏览器滚动监