H5应用程序缓存简介

说到“春运”，大家都会联想到拥挤的火车站的画面，究其原因，是突发的客流量冲垮了有限的客运资源。乘客和座位之间是“一个萝卜一个坑”的关系，乘客多、座位少，自然有人买不到票。其实，类比互联网上的网页，道理是一样的。用户用浏览器打开一个网页的 URL，相当于发生了若干次下载，如果服务器顶不住，导致一些访问失败，会带来很糟糕的用户体验。

遇到这种情况，开发者或许会考虑对服务器“扩容”。扩容说起来简单，操作起来需要很多资金开销，但通过使用Application Cache技术可以达到扩容的目的，代价只是多加几句代码。Application Cache是HTML 5中定义的一种离线存储技术标准。这种技术可以让开发者明确地指定页面中哪些静态资源可以在第一次访问网页的同时缓存到本地，并且在下次访问该网页时向服务器询问本地缓存的资源是否需要更新。

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

需要说明的是，如果Cache中的数据可用，浏览器就会对其进行加载，即使它们已经过期。页面可以通过注册监听器的方式获得Cache更新成功的事件，主动刷新一下页面，将最新的内容及时展示给用户。

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

所以，如果Application Cache用得好，Web应用可以获得媲美Native应用的启动速度和离线使用的能力，同时释放服务器的带宽。