离线缓存

html5离线缓存优势:浏览器缓存文件当网络瘫痪通过调用缓存文件用户可以进行浏览,已缓存资源加载更快,减少服务器负担。

1.更改appche 文件  httpd.conf

2.manifest文件(告诉浏览器要缓存什么资源)

CACHE MANIFEST
# 缓存资源
CACHE:   
1.css 
1.js
1.jpg
# 声明用于指定无需缓存的文件
NETWORK: 
2.jpg
# 资源不可用的情况下,将用户重定
向到特定文件
FALLBACK: 

3.更新缓存方法

   /*code1,简单粗暴的*/
    // applicationCache.onupdateready = function(){
      // applicationCache.swapCache();
      // location.reload();
    // };

    /*code2,缓存公用方法*/
    var EventUtil = {
      addHandler: function(element, type, handler) {
        if (element.addEventListener) {
           element.addEventListener(type, handler, false);
        } else if (element.attachEvent) {
          element.attachEvent('on' + type, handler);
        } else {
          element["on" + type] = handler;
        }
      }
    };
    
    EventUtil.addHandler(applicationCache, 'updateready', function() { //缓存更新并已下载,要在下次进入页面生效
    applicationCache.update(); //检查缓存manifest文件是否更新,ps:页面加载默认检查一次。
    applicationCache.swapCache(); //交换到新的缓存项中,交换了要下次进入页面才生效
    location.reload(); //重新载入页面
    });

注意:1.当manifest文件内容不变,浏览器将调用缓存文件

posted @ 2016-11-16 17:38  东歌  阅读(247)  评论(0编辑  收藏  举报