HTML5面试题-HTML5 如何实现离线缓存，有什么特点？

HTML5 如何实现离线缓存，有什么特点

实现：

• 缓存清单

  • 一个普通文本文件，其中列出了浏览器应缓存以供离线访问的资源，推荐使用 .appcache 为后缀名
  • 例如我们创建了一个名为 demo.appcache 的文件，然后在需要应用缓存在页面的根元素(html)添加属性manifest="demo.appcache"，路径要保证正确。

• manifest 文件格式

  1. 顶行写 CACHE MANIFEST

  2. CACHE: 换行 指定我们需要缓存的静态资源，如.css、image、js等

  3. NETWORK: 换行 指定需要在线访问的资源，可使用通配符

  4. FALLBACK: 换行 当被缓存的文件找不到时的备用资源（备用资源路径与当前资源路径之间要有空格）

• 其它

  1. CACHE: 可以省略，这种情况下将需要缓存的资源写在 CACHE MANIFEST
  2. 可以指定多个 CACHE NETWORK FALLBACK，无顺序限制
  3. # 表示注释；
  4. 只有当 demo.appcache 文件内容发生改变时或者手动清除缓存后，才会重新缓存。
  5. chrome 可以通过 chrome://appcache-internals/工具和离线（offline）模式来调试管理应用缓存

  CACHE MANIFEST
  # 上面必须是第一行 
  CACHE:
  
  #此部分写需要缓存的资源 （#是注释的意思）
  
  ./images/img1.jpg
  ./images/img2.jpg
  ./images/img3.jpg
  ./images/img4.jpg
  
  NETWORK:
  
  #此部分要写需要有网络才可访问的资源，无网络则不访问
  
  ./images/img1.jpg
  ./images/img2.jpg
  
  #*
  
  FALLBACK:
  
  #当访问不到某个资源的情况下，自动由另一个资源替换
  
  ./images/img4.jpg  ./images/img5.jpg
  

特点：

• 离线浏览 - 用户可在应用离线时使用它们
• 速度 - 已缓存资源加载得更快
• 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。