html5 Application Cache——加快简历二次访问速度

时间 2019-11-19

标签 html5 html application cache 加快简历二次访问速度栏目 HTML5 繁體版

原文原文链接

上篇博客（在github上写我的简历——最简单却又不容易的内容罗列）介绍了我在github上放的一个我的在线简历，有朋友看了后告诉我一个很大缺陷，使用github挺慢的，每次看的时候都很慢，第一反应这问题我可解决不了，后来想到是否能够利用缓存，至少第二次看的时候会快一些，但缓存机制大部分依赖于浏览器，并且默认都用了，仍是很慢，因此此路不通。css

application cache

突然灵光一现（原谅我愚笨，其实应该很快想到的），前段日子在看html5的东西，当时以为application cache没有太大用处，又肤浅了，用在这个需求实在太合适了。那么是什么是application cache呢？html

application cache是html5引入的本地存储方案之一，和咱们日常浏览器缓存相似，application cache在本地存储页面资源，咱们先不用着急看application具体怎么使用，首先看看传统浏览器缓存有哪些问题。html5

一：浏览器缓存是不可靠的，咱们不直到当前哪些资源被缓存，也不知道会被缓存多久，由于浏览器会随时由于空间或时间缘由舍弃某些缓存，加入新的缓存文件。jquery

二：虽然有浏览器缓存，但咱们不能依赖浏览器缓存彻底离线访问webgit

application cache解决了这两个主要问题，application cache容许开发者指定页面哪些资源须要被缓存，虽然也有空间大小限制，可是能够经过程序更改，能够控制缓存生命周期，安全可靠的让web离线使用，这么神奇，看看是怎么作到的吧github

manifest 文件

要向使用application cache 须要为页面的html标签添加manifest属性，属性值是manifest文件路径，可使用同源的绝对地址，也可使用相对地址。web

<!doctype html>
<html lang="zh" manifest="main.manifest">
</html>

application cache是经过mannifest文件来管理的，manifest文件是简单的文本文件，内容是须要被缓存供离线使用的文件列表，及不须要被缓存或读取缓存失败的文件控制。mannifest文件可使用任意拓展名，但须要在服务器中添加MIME类型匹配，使用apache比较简单，若是使用.manifest做为拓展名在apache配置文件中添加apache

AddType text/cache-manifest .appcache

使用IIS的话经过界面找到添加MIME窗口添加便可浏览器

如何配置

下面是一个manifest文件的示例缓存

main.manifest

 1 CACHE MANIFEST
 2 #version 0.2.0
 3 #date: Nov 24 2013
 4 
 5 CACHE:
 6 css/reset.css
 7 css/main.css
 8 js/jquery.js
 9 images/bg.png
10 images/bg_hl.jpg
11 images/icons/yes.png
12 images/icons/top.png
13 offline.html
14 
15 NETWORK:
16 *
17 
18 FALLBACK:
19 index.html offline.html

1. 文件的第一行必须是 CACHE MANIFEST

2. ＃开头的行做为注释语句，因此文件中关于版本和日期都是注释，为了方便维护

3. 网站的缓存不能超过5M

4. 文件资源路径可使用绝对路径也可使用相对路径

5. 文件列表中任意一个缓存失败都会致使整个缓存失效，浏览器hui按没有application cache处理

6. 既能够站点使用同一个minifest文件，也能够每一个页面使用一个

而后看一下CACHE、NETWORK、和FALLBACK三条指令语句

CACHE：指明须要缓存的资源文件,浏览器会自动缓存带有manifest属性的html页面，因此yinyongwmanifest文件的页面不用写在里面

NETWORK：不须要缓存的文件，名字就叫网络工做嘛，可使用通配符

FALLBACK：没法访问缓存文件的备选文件，也可使用通配符，上边例子的配置，读取不到index.html的话就会跳转至offline.html

看看效果

在在线简历中使用application cache后，访问一下

能够在控制台看看application cache，果然咱们但愿缓存的内容都被缓存了，试试离线好很差使，因为不知道github是否是支持及其定义的manifest文件拓展名是什么，只好在本身本地试试了，在电脑上配置好，用手机访问，而后断开手机网络，刷新一下。

刷新了八下依旧好使哎，手机离线也能看，就不截图了。当清除掉application cache而且关掉网络的时候，页面果然到了offline.html

更新

这样不依赖与浏览器的缓存机制也有个问题，怎么更新文件告知客户端呢，总不能永远使用一份缓存啊。简单的方法咱们能够更新manifest文件，修改注释的版本号或者日期就能够，这样浏览器就会从新缓存文件，值得注意的是须要minifest文件自己更改（注释均可以），而缓存文件清单中的文件自己好比offline.html更新浏览器是不会从新缓存的。

这样咱们修改了服务器的manifest文件后用户多刷几遍页面就能够了，但未免低级了一些，咱们能够经过application cache 提供的接口来检查更新

application cache 在window上注册了一个applicationCache对象

status属性标明当前application cache状态

0:UNCACHED（未缓存）

1:IDEL（空闲的）

2:CHECKING（正在检查）

3:DOWNLOADING（正在下载）

4:UPDATEREADY（准备更新）

5:OBSOLETE (已过期)

另外对象有几个事件，看名字就能知道时作什么的。

对象有三个重要方法

update:尝试检查下载新application cache，固然得服务器更新了manifest文件才会下载

swapCache:当status变为UPDATEREADY时就能够更新本地application cache了

abort:取消正在进行的application cache更新

即便下载完新的缓存，也不意味这页面会更新，咱们须要从新加载一次页面，能够经过这样的方式来使页面第一时间更新缓存

applicationCache.onupdateready=function(e) {
      applicationCache.swapCache();
      if (confirm('页面已更新，是否加载新内容?')) {
        window.location.reload();
      }
    };

固然也能够设个轮询函数定时调用update方法检查更新，这里不演示了

最后

虽然没有如愿在github上使用application cache，但我已经把代码push到了个人github上，有兴趣同窗能够down下来看看，了解到了application cache的使用也算是收获颇丰，小伙儿伴儿在你的我的主页上试试application cache吧。