关于H5缓存加速研究经历记录

参考:QQ空间面向移动时代Hybrid架构设计:https://mp.weixin.qq.com/s?__biz=MzI4NzE1NTYyMg==&mid=2651101486&idx=1&sn=87a433baf963224870ccf8bcb28ae90b&scene=1&srcid=0806Ljm17EoEks4eZB741TQf&key=8dcebf9e179c9f3a3150ce942b1a2dbf2fca1bf4dc89f0ebf99eba6b9fbe0d92321e13fb436ec33142b5bdbb5704926e&ascene=0&uin=ODY2MDA0NDIy&devicetype=iMac+MacBookPro11%2C1+OSX+OSX+10.11.6+build(15G31)&version=11020201&pass_ticket=4ZsAyCdfAwZESAfeMnQ%2FNDssK7HeuLUVNvTZf1sVk1HUCh94KL7qhctdrG%2BwHshi

经过一段时间的研究经历，为了以后继续研究，特以此文记录下我的感想

目标：打开网页的速度体验无限接近于原生APP，并且可以节约流量。

为什么原生的APP感觉上比网页速度快呢，我觉得有以下几点原因：

1.原生的页面在用户打开的时候APP已经构造好了，不需要接网络，而网页的渲染需要从服务器拉取

网页源码后，APP才能渲染，我觉得这是网页体验不好的最主要的原因

2.WebView这个控件本身初始化就比较消磨时间，这也是网页体验不好的另外一层原因吧

3.webview网络的底层总是感觉不那么稳定

针对以上几种问题，通过思考，给出以下解决方案：

方案一：

1.直接给出本地缓存，默默检查是否网页数据有变化，有变化则刷新网页，这样可以保证二次加载速度快

2.通过读取配置宕下来一系列网页或者单个资源，在APP发布的时候就缓存到APP安装包中，这样可以保存首次加载快

3.APP每次请求服务器，并且带上本地资源最后同步时间给服务器，服务器告诉APP应该更新什么，删除什么，新增什么

4.服务器维护一份资源列表，并且支持收到和自动更新资源列表

问题：第一点提到的有变化则刷新网页可能很难做到，因为iframe嵌套网页，嵌套的资源也可能变化，这点很难做到，其二刷新网页给予用户的体验不好，

第三对统计埋点信息有所污染，所以有变化刷新网页可以不要，我只要每次进入APP的时候根据第三点检查一下就可以了

这样可以保证网页的基本实时性

方案二：

基本思路一致，主要是服务器按模块打成资源包的方式，这种方式需要要服务器端切割多个模块，而方案1是按照单个资源维护