缓存策略

缓存策略

标签（空格分隔）： 会友行

参考资料链接

【Web缓存机制系列】4 – HTML5时代的Web缓存机制
【Web缓存机制系列】5 – Web App时代的缓存机制新思路
【Web缓存机制系列】6 – 进击的Hybrid App，量身定做缓存机制*
了解云集运行环境-W3C Web App Manifest
crosswalk hybrid app framework
Resource Bundles
best-of-both-worlds-mixing-html5-native-code *

混合App缓存策略的关键，在原生和web交界页面处，原生和web之间的切换越多，缓存的更新难度就越大。

单页面应用缓存-数据层

缓存Ajax请求

由于顶级框架页面是不会由于调整刷新而导致javascript上下文丢失，所以底层或各个模块所需要的Ajax请求，都是可以通过顶级框架统一请求后，并以信息服务的形式对外提供Api调用。对于一些实时性要求不是很强的请求来说，可以由顶级框架做统一缓存，定期更新。这种做法可以不影响用户体验的前提下，明显减少请求数，降低网络流量，并间接减轻了服务器的压力

一个实践是：顶级框架在hybrid app 里面可以理解为从原生切换到web的第一个web页面，在单页面应用中，首个页面会加载web app运行所需的绝大多数基础文件，通过如 require.js 异步按需加载首页后各个页面所需要的js文件，如页面的 控制器.js，数据模型.js；通过ajax请求，异步加载html文件，通过控制器.js 和 前端模板渲染，再输出到浏览器。

如果一系列的页面都要用到相同的数据源，可以考虑把数据 存储到 浏览器localStorage里，后续页面从 localStorage 里面读取数据。推荐使用store.js进行存储的操作。另外的一些选择是，webSql，indexedDB 等，localStorage方案，兼容性相对会好一些。

通过Javascript实现内存缓存

跟缓存Ajax请求的结果类似，程序运行过程中的其他数据，其实也可以采用类似的方式在顶级容器的Javascript上下文中缓存。

客户端提供缓存读写能力

我们知道，HTML5的localstorage仅仅只能支持5m的存储。我们可以按localstorage的设计思路，让客户端为Web定制更大，更灵活的本地存储功能。到时，Web缓存能做的事情就会更多。

通过WebViewJavascriptBridge可以很轻松的实现这个功能。

单页面应用缓存-视图层

manifest

1、第一次必须联网，在移动网络下首次打开效果非常不理想

2、http 头设置会导致 manifest 无法正常更新，见 http://www.alloyteam.com/2012/01/html5-offline-app-update-problem/

3、Manifest 中缓存文件一旦下载出错，后续的文件将不再下载，抛出错误事件，见：http://stackoverflow.com/questions/6666513/html5-manifest-caching-error

4、Android 系统版本众多，较低版本的浏览器对 manifest 支持不完善

5、引用 manifest 的 html 页面本身也会被缓存

由于坑太多，既然有native的本地资源，所以决定模仿 AlloyKit 的资源本地化方案。

Alloykit - 本地化模块

|AlloyTeam未开源 AlloyKit模块

架构图

html存入代码bundle

缺点：

1. 存在严重的更新问题
2. 每次发版的时候，html内去除动态语言很累人

但是技术成本还是蛮低的。