【产品经理】H5 应用程序缓存简介

说到具有鲜明中华民族特色的春运，想必大家都会联想到如下的画面：

究其原因，还不是突发的客流量冲垮了有限的客运资源。乘客和座位是一个萝卜一个坑，乘客多座位少，自然有人买不到票。其实，类比互联网上的网页，又何尝不是一样？正如前面文章所讲，互联网一切皆下载，用户用浏览器每次打开一个网页的 url，都相当与发生了若干次的下载，如果服务器顶不住了，导致一些访问失败，用户就只能看到：

这种用户体验实在是太糟糕了！

遇到这种情况，我们或许会考虑对我们的服务器扩容。扩容说起来简单，操作起来可都是真金白银啊，但现在你只需要了解一个新的技术，就可以达到扩容的目的，代价只是多加了几句代码。这个新技术就是Application Cache。

Application Cache是HTML5 中定义的标准，是一种离线存储技术。这种技术可以让我们明确的指定页面中的哪些静态资源可以在第一次访问网页的同时缓存到本地，并且在下次访问该网页时向服务器询问本地缓存的资源是否需要更新。流程如下：

从上图中我们可以看到，浏览器打开使用了Application Cache技术的网页时，会先尝试从 cache中加载数据，并同时向服务器询问本地资源是否已经过期，如果本地资源过期，浏览器会自动从服务器上更新最新的资源到 cache 中。

需要说明的是，图中的①和②是并行执行的，也就是说，如果 cache 中的数据可用，浏览器加载的都是 cache 中的数据，即便是 cache 中的数据已经过期。②过程更新到 cache 中的数据，需要用户下次再打开这个页面的时候才会加载。不过页面可以通过注册监听器的方式获得 cache 更新成功的事件，来主动的刷新页面，让最新的内容及时展示给用户。

Application Cache技术通过缓存资源到本地，避免了每次打开网页都会从服务器拉取一大坨数据过程，取而代之的只是一个轻量级的更新检查请求，这样，你的服务器的带宽就被大大的释放了出来。另外，由于网页的资源都是通过本地资源读取，用户非首次打开同一页面，内容展示速度会被最大化的缩短，甚至达到 native 应用的水平，从而进一步优化用户体验。另外，如果页面所有的资源都被缓存到了本地，那么你的页面可以在离线的情况下被完整的加载出来！

总而言之，如果Application Cache用的好，你的 web 应用可以获得媲美 native 应用的启动速度和离线使用的能力，并同时释放了服务器的带宽，还不赶快让你们的程序猿去搞一哈？

艾玛，不说了，要去抢下一趟火车票去了，春运伤不起啊。