客户端缓存

2017-02-18 12:58:11 Web性能 1236 0

Ajax缓存场景

它的适用范围是交互较多,频繁读取数据的web应用。

var xhr = new XMLHttpRequest(),
    cache_time = 60 * 60, // 缓存一小时
    cache_flag = false, // 第一次打开的时候js不知道是否缓存了
    data;
xhr.open('GET', url, true);
xhr.onload = function () {
    if (this.status === 200) {
        data = JSON.parse(this.responseText);
        var code_name= data.Prefix + err_code;
        eval( 'var err_msg = data.Err.' + code_name );
        resolve( err_msg );
    }
};
xhr.onerror = function (e) {
    reject( e );
};
if( false == cache_flag ){
    xhr.setRequestHeader( "Cache-Control", "private,max-age=" + cache_time );
    cache_flag = true ; // 后面再点击的时候,直接读缓存数据
}
xhr.send( null );

大致过程,如下

第 1 次访问

第一次访问

其http响应头,如下

第一次访问http响应头

在缓冲时间内,第 N 次访问 , N > 1

其http响应头,如下

第二次访问http响应头

注意

200 OK (from cache) 是浏览器没有跟服务器确认,直接用了浏览器缓存
304 Not Modified 是浏览器和服务器多确认了一次缓存有效性,再用的缓存[一般是F5刷新]。

触发

Cache-Control 设置了 max-age 的情况下,max-age过期后 首次刷新会出现304(如果有更新内容,则是200),之后在max-age缓存过期之前刷新都是200(from cache)

分类树的应用

示例数据,如下

|--食品
  |---饼干
    |---巧克力饼干
|--饮料
  |---可乐
|--电子产品
  |---手机
  |---平板电脑

先取第一层的所有数据

|--食品
|--饮料
|--电子产品

点击其中一层,Ajax获取该层的下一层级的所有数据

|--食品
  |---饼干
|--饮料
|--电子产品

后面的以此类推,示例拉取第三层数据

|--食品
  |---饼干
    |---巧克力饼干
|--饮料
|--电子产品

HTML5本地存储

涉及 localStoragesessionStorageIndexedDB

localStorage 与 sessionStorage 例子

存储读取与设置源码 请看 本地缓存 部分代码

localStorage与sessionStorage场景 请搜索ComicCommon.cache_ 部分代码

IndexedDB 待更新
注:若无特殊说明,文章均为云天河原创,请尊重作者劳动成果,转载前请一定要注明出处