web缓存（三）-HTML5缓存

发表于   |  

web缓存

  • 什么是web缓存：
    • Web缓存是指一个Web资源（如html页面，图片，js，数据等）存在于Web服务器和客户端（浏览器）之间的副本。缓存会根据进来的请求保存输出内容的副本；当下一个请求来到的时候，如果是相同的URL，缓存会根据缓存机制决定是直接使用副本响应访问请求，还是向源服务器再次发送请求。
  • 本篇主要讲的是HTML5缓存
  • web缓存的好处：
    • 减少网络带宽消耗
    • 降低服务器压力
    • 减少网络延迟，加快页面打开速度。
    • 。。。。。

  • web缓存政策：

    • 服务器缓存：
      • CDN缓存
      • 代理服务器缓存
      • Combo服务

    • 浏览器缓存

      • http缓存机制：
        • 本地缓存阶段
          • Cache-COntrol
          • Expires
        • 协商缓存阶段
          • Last-Modified&if-modified-since
          • ETag&If-None-Match

    • HTML5缓存思路

      • 离线存储manifest
      • 本地存储localStorage

HTML5缓存

离线存储manifest

  • 离线访问对基于网络的应用而言越来越重要。虽然所有浏览器都有缓存机制，但它们并不可靠，也不一定总能起到预期的作用。HTML5 使用 ApplicationCache 接口解决了由离线带来的部分难题。

  • 使用缓存接口可为您的应用带来以下三个优势：

    • 离线浏览 - 用户可在离线时浏览您的完整网站
    • 速度 - 缓存资源为本地资源，因此加载速度较快。
    • 服务器负载更少 - 浏览器只会从发生了更改的服务器下载资源。

  • 应用缓存（又称 AppCache）

    • 可让开发人员指定浏览器应缓存哪些文件以供离线用户访问。即使用户在离线状态下按了刷新按钮，您的应用也会正常加载和运行。

使用Cache Manifest

实例以及使用解析

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// html文件
<!DOCTYPE HTML>
<html manifest="demo.appcache">

<body>
The content of the document......
</body>

</html>

// 缓存文件 demo.appcache
CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK:
login.asp

FALLBACK:
/html5/ /404.html

下面我们来具体分析和看看manifest的用法

  1. 引用清单文件

    1
    2
    3
    <html manifest="demo.appcache">
      ...
    </html>
    • 首先，在缓存的网络应用中，需要添加manifest属性，如果页面未指定该属性，则页面不会被缓存（除非在manifest文件中直接指定了该页面）
    • manifest文件的建议的文件拓展名是：”.appcache”
    • 注意：manifest文件需要配置正确的 MIME-type,即 “text/cache-manifest”。必须在 web 服务器上进行配置。
  2. Manifest 文件
    • manifest文件，用于告知浏览器被缓存的内容
    • manifest 文件可分为三个部分：
      • CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
      • NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
      • FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

  3. CACHE MANIFEST（首次下载后缓存）
    第一行，CACHE MANIFEST，是必需的： 

    1
    2
    3
    4
    CACHE MANIFEST
        /theme.css
        /logo.gif
        /main.js

    当manifest文件加载后，浏览器会从网站下载这三个文件，便可以离线使用了。

  4. NETWORK（不缓存的文件）
    下面的 NETWORK 小节规定文件 “login.asp” 永远不会被缓存，且离线时是不可用的：

    1
    2
    NETWORK:
    login.asp
可以使用星号来指示所有其他资源/文件都需要因特网连接：


1
2
NETWORK:
*

  1. FALLBACK
    下面的 FALLBACK 小节规定如果无法建立因特网连接，则用 “offline.html” 替代 /html5/ 目录中的所有文件：

    1
    2
    FALLBACK:
    /html5/ /404.html

    注释：第一个 URI 是资源，第二个是替补。

  2. 注释
    以 “#” 开头的是注释行，但也可满足其他用途。应用的缓存会在其 manifest 文件更改时被更新。

    1
    2
    CACHE MANIFEST
    # 2012-02-21 v1.0.0

  3. 缓存更新的情况

    • 用户清空浏览器缓存
    • manifest 文件被修改（参阅下面的提示）
    • 由程序来更新应用缓存

缓存状态

window.applicationCache 对象是对浏览器的应用缓存的编程访问方式。其 status 属性可用于查看缓存的当前状态：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var appCache = window.applicationCache;

switch (appCache.status) {
  case appCache.UNCACHED: // UNCACHED == 0
    return 'UNCACHED';
    break;
  case appCache.IDLE: // IDLE == 1
    return 'IDLE';
    break;
  case appCache.CHECKING: // CHECKING == 2
    return 'CHECKING';
    break;
  case appCache.DOWNLOADING: // DOWNLOADING == 3
    return 'DOWNLOADING';
    break;
  case appCache.UPDATEREADY:  // UPDATEREADY == 4
    return 'UPDATEREADY';
    break;
  case appCache.OBSOLETE: // OBSOLETE == 5
    return 'OBSOLETE';
    break;
  default:
    return 'UKNOWN CACHE STATUS';
    break;
};

使用编程的方式更换新缓存：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
function handleCacheEvent(e) {
  //...
  //appCache.update();
  appCache.swapCache();
  window.location.reload();
}
//这里的 update()和swapCache()不不会向用户提供新的资源，只是缓存文件清单的更新。

function handleCacheError(e) {
  alert('Error: Cache failed to update!');
};

// Fired after the first cache of the manifest.
appCache.addEventListener('cached', handleCacheEvent, false);

// Checking for an update. Always the first event fired in the sequence.
appCache.addEventListener('checking', handleCacheEvent, false);

// An update was found. The browser is fetching resources.
appCache.addEventListener('downloading', handleCacheEvent, false);

// The manifest returns 404 or 410, the download failed,
// or the manifest changed while the download was in progress.
appCache.addEventListener('error', handleCacheError, false);

// Fired after the first download of the manifest.
appCache.addEventListener('noupdate', handleCacheEvent, false);

// Fired if the manifest file returns a 404 or 410.
// This results in the application cache being deleted.
appCache.addEventListener('obsolete', handleCacheEvent, false);

// Fired for each resource listed in the manifest as it is being fetched.
appCache.addEventListener('progress', handleCacheEvent, false);

// Fired when the manifest resources have been newly redownloaded.
appCache.addEventListener('updateready', handleCacheEvent, false)

本地存储localStorage

  1. HTML5 提供了两种在客户端存储数据的新方法：

    • localStorage - 没有时间限制的数据存储
    • sessionStorage - 针对一个 session 的数据存储
      之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。

  2. localStorage 方法

    • localStorage 方法存储的数据没有时间限制。

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      localStorage.fresh = "vfresh.org";   //设置一个键值 
      var a = localStorage.fresh;   //获取键值
      console.log(a);

      //API

      //清空storage 
      localStorage.clear();

      //设置一个键值 
      localStorage.setItem("fresh","vfresh.org");

      //获取一个键值 
      localStorage.getItem("fresh"); 

      //return "vfresh.org" //获取指定下标的键的名称（如同Array） 
      localStorage.key(0); 

      //return "fresh" //删除一个键值 
      localStorage.removeItem("fresh");
  • Cookie, LocalStorage 与 SessionStorage的区别
特性 Cookie localStorage sessionStorage
数据的生命期 一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效 除非被清除，否则永久保存 仅在当前会话下有效，关闭页面或浏览器后被清除
存放数据大小 4K左右 一般为5MB 一般为5MB
与服务器端通信 每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题 仅在客户端（即浏览器）中保存，不参与和服务器的通信 仅在客户端（即浏览器）中保存，不参与和服务器的通信
易用性 需要程序员自己封装，源生的Cookie接口不友好 源生接口可以接受，亦可再次封装来对Object和Array有更好的支持 源生接口可以接受，亦可再次封装来对Object和Array有更好的支持

构建可缓存站点的建议

  • 来自alloyteam：如何构建可缓存站点
  • 同一个资源保证URL的稳定性
  • 给Css、js、图片等资源增加HTTP缓存头，并强制入口Html不被缓存
  • 减少对Cookie的依赖
  • 减少对HTTPS加密协议的使用
  • 多用Get方式请求动态Cgi
  • 动态CGI也是可以被缓存

资料参考：