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

我不是女神ヾ 2022-01-14 10:07 149阅读 0赞

日期：2013-6-28  来源：[GBin1.com][]

[![前端性能优化：网络存储的静态缓存和非必要内容优化][title.jpg]][title.jpg 1]

上一篇我们介绍了[前端性能优化：高频执行事件/方法的防抖][Link 1]，这篇我们将介绍前端性能优化：网络存储的静态缓存和非必要内容优化。

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取代复杂的元素注入 ][DocumentFragments_innerHTML_]
 *  [前端性能优化：高频执行事件/方法的防抖 ][Link 2]
 *  [前端性能优化：网络存储的静态缓存和非必要内容优化 ][Link 3]

via [ Nelly@极客社区][Link 3]

**来源：[前端性能优化：网络存储的静态缓存和非必要内容优化][GBin1.com]**

[GBin1.com]: http://www.gbin1.com/technology/javascript/20130628-front-end-performance-optimization-3/
[title.jpg]: http://www.gbin1.com/technology/javascript/20130628-front-end-performance-optimization-3/title.jpg
[title.jpg 1]: http://www.gbin1.com/technology/javascript/20130628-front-end-performance-optimization-3/index.html
[Link 1]: http://www.gbin1.com/technology/javascript/20130618-front-end-performance-optimization-2
[DocumentFragments_innerHTML_]: http://www.gbtags.com/gb/share/1215.htm
[Link 2]: http://www.gbtags.com/gb/share/1217.htm
[Link 3]: http://www.gbtags.com/gb/share/1233.htm