首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

前端性能优化:网络储存的静态缓存和非必要内容优化

2013-07-04 
前端性能优化:网络存储的静态缓存和非必要内容优化日期:2013-6-28??来源:GBin1.com上一篇我们介绍了前端性

前端性能优化:网络存储的静态缓存和非必要内容优化

日期: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方法一样,保证了存储的数据不会过期。调用方法也非常简单: ......

下一篇中,我们会讲述使用同步加载来优化你的前端性能.

相关阅读:

前端性能优化:DocumentFragments或innerHTML取代复杂的元素注入 前端性能优化:高频执行事件/方法的防抖 前端性能优化:网络存储的静态缓存和非必要内容优化

via Nelly@极客社区

来源:前端性能优化:网络存储的静态缓存和非必要内容优化

热点排行