完美使用application cache几点心得

web app最大的硬伤是页面渲染与交互性能问题，页面渲染与加载静态文件的快慢有关。如何快速加载它们？我们可以用html5的新特性application cache(非官方简称：appCache)来缓存各种静态文件，达到快速加载静态文件的目的。本文将与你共同讨论关于appCache的用法。

对于appCache的基本用法，请自行google之，本文也推荐两篇appCahce API介绍文章：Application Cache API(一)    Application Cache API(二)。

我们知道，在A页面中引用manifest文件，即使该manifest文件没有在列表中缓存A页面，但是A页面也会自动缓存。可以想象，如果该页面是传统的jsp或php解析而来的，那么解析后的html被缓存了，后端数据发生变化，该页面也不会有反应，除非更新manifest。频繁地更新manifest会失去利用此html5新特性的价值，造成加倍的流量损失（appCache缓存文件是重新下载服务器文件，而无视浏览器渲染时已经下载的）。如何解决这个尴尬的问题呢？实践证明，“js渲染页面+localStorage缓存数据+appCache缓存静态文件”可以完美避开appCache的不足，既有效利用了新特性，页面又能及时获取到远程的新数据。下面就这三点技术相互之间的配合使用，详细说明下：

1.js渲染页面。

很常见的技术，你可以在js里拼接字符串，通过appendChild加入到页面中，也可以通过javascript-MVC来做这方面事情。因为数据和模板是分离的，数据通过ajax/jsonp远程获得，你也可以用新技术webSocket。其实建议数据也保存到本地，若远程数据没有发生改变时，就不用重新渲染某个区域，做到局部更新渲染。目前比较常见的mvc框架backbone/angularJS等，实现的都很不错。私心推一下自己的mvc框架——icat-mvc，它完(ji)美(ben)地(shang)实现了上述描述的所有事情。访问页面时，先是通过localStorage数据进行渲染页面，不至于让页面一片空白;发出ajax请求获取远程数据，如果远程数据和本地数据一致则不再重新渲染，不一致则重新渲染该区域。

2.localStorage缓存数据。

辅助js加快渲染页面，不至于js渲染页面空白时间太长。大家会问，如果第一次访问页面，没有缓存怎么办？呵呵，不怎么办。icat-mvc实现就是，如果没有缓存，也会把区域框架(<wrapxxx></wrapxxx>)先渲染到页面中，告诉js我曾经来过。获得远程数据后，重新渲染时就会直接appendChild标签wrapxxx之下。但是后面再去访问此页面，因为数据是默认缓存的，就可以体验页面飞速渲染的好处了（体验区）。各位可以在pc-chrome上狂刷几下该页面，看除了第一次有白屏之外，其余几次都是图片加载下（欺骗性的图片懒加载效果），整个页面框架基本不动。

3.appCache缓存静态文件。

亮点总是在最后出现。但是遗憾地告诉大家，如果想让离线效果更好（各种图片都要显示），单纯地依赖前端技术无法做到。这时就要借助服务端的威力了，让服务端监听“敏感数据”特别是图片的增删改，动态生成manifest文件，从而告诉浏览器，缓存的东西该更新一下了。如果离线要求不那么严格，你可以只缓存用到的静态文件，不需要服务端参与appCahce，也能让页面迅速渲染。

ok，本文就此结束了。

转载于:https://www.cnblogs.com/valleykid/p/3495504.html