【Web缓存机制概述】4 – HTML5时代的Web缓存机制寻技术

====索引=====

【Web缓存机制概述】1 – Web缓存的作用与类型

【Web缓存机制概述】2 – Web浏览器的缓存机制

【Web缓存机制概述】3 – 如何构建可缓存站点

【Web缓存机制概述】4 – HTML5时代的Web缓存机制

【Web缓存机制概述】5 – Web App时代的缓存机制新思路

============

随着现代浏览器的推动，Flash放弃对移动端的支持，HTML5无疑成为当前Web前端炙手可热的话题。各大游戏开发商、App开发商纷纷投入人力进行研究和技术储备。相信不久的将来，HTML5会迎来一个快速发展和普及的春天。那么，HTML5这个新一代的标准，又给我们带来哪些缓存机制呢？

HTML5 之离线应用Manifest

我们知道，使用传统的技术，就算是对站点的资源都实施了比较好的缓存策略，但是在断网的情况下，是无法访问的，因为入口的HTML页面我们一般运维的考虑，不会对其进行缓存。HTML5的Cache Mainifest离线应用特性就能够帮助我们构建离线也能使用的站点，所有的资源都使用浏览器本地缓存，当然前提是要求在联网的情形下使用过一次站点。

如何实现离线访问特性

实现的步骤非常简单，主要3个步骤：

1）在服务器上添加MIME TYPE支，让服务器能够识别manifest后缀的文件

AddType text/cache-manifest manifest

2）创建一个后缀名为.manifest的文件，把需要缓存的文件按格式写在里面，并用注释行标注版本

CACHE MANIFEST

# 直接缓存的文件

CACHE:

Path/to/cache.js

# version：2012-03-20

3）给 <html> 标签加 manifest 属性，并引用manifest文件

具体可以参考：HTML5 缓存: cache manifest

离线应用访问及更新流程

第一次访问离线应用的入口页HTML（引用了manifest文件），正常发送请求，获取manifest文件并在本地缓存，陆续拉取manifest中的需要缓存的文件
再次访问时，无法在线离线与否，都会直接从缓存中获取入口页HTML和其他缓存的文件进行展示。如果此时在线，浏览器会发送请求到服务器请求manifest文件，并与第一次访问的副本进行比对，如果发现版本不一致，会陆续发送请求重新拉取入口文件HTML和需要缓存的文件并更新本地缓存副本
之后的访问重复第2步的行为

离线机制的缓存用途

从Manifest的机制来看，即使我们不是为了创建离线应用，也同样可以使用这种机制用于缓存文件，可以说是给Web缓存提供多一种可以选择的途径。

存在的问题：缓存文件更新控制不灵活

就目前HTML5提供的manifest机制来讲，一个页面只能引用一个manifest页面，而且一旦发现这个manifest改变了，就会把里面所有定义的缓存文件全部重新拉取一遍，不管实际上有没有更新，控制比较不灵活。针对这个问题，也有的同学提出了一些建议，比如把需要缓存的文件分模块切分到不同manifest中，并分开用HTML引用，再使用强大的iframe嵌入到入口页面，这样就当某一个模式需要有更新，不会导致其他模块的文件也重新拉取一遍。