昆山农商行个人手机银行app前端图片优化方案
项目:昆山农商行个人手机银行app
日期:2017-06-05
版本:v1.0
作者:longbo
需求:优化前端图片请求,减少app流量消耗
前端请求的图片类型
- 营销类宣传图片、广告:例如首页的轮播banner;
- 应用图片,例如首页的九宫格图标;
所有图片都可以归纳为这两类。
- 第1类需要经常变动,且必须允许业务人员直接通过后台管理端变更。
- 第2类不需要经常变动,只有应用需要功能性的迭代时,通过升级资源包发布新版本的方式来变更。
这两种图片有各自不同的优化方式
优化1类图片
- 原有的方式不变,即先发交易请求图片访问路径。再展示图片;
- 图片需部署在图片服务器上并在服务器设置Etag缓存;
- 手机银行的资源包缓存机制与webview自身的Etag缓存可以兼容共存,如设置成功,手机端访问图片将收到服务器返回的304响应码,从而转为从本地浏览器缓存获取图片,节约客户流量。
优化2类图片
- 将图片全部转移至pmobile项目,例如“首页九宫格”、“全部功能”的小图标;
- 打包发布后,pmobile资源包将包含这些2类图片,原生客户端会拦截资源包内已有的请求,做到0流量消耗;