昆山农商行个人手机银行app前端图片优化方案

昆山农商行个人手机银行app前端图片优化方案

项目:昆山农商行个人手机银行app
日期:2017-06-05
版本:v1.0
作者:longbo
需求:优化前端图片请求,减少app流量消耗


前端请求的图片类型

  1. 营销类宣传图片、广告:例如首页的轮播banner
  2. 应用图片,例如首页的九宫格图标;

所有图片都可以归纳为这两类。

  • 第1类需要经常变动,且必须允许业务人员直接通过后台管理端变更。
  • 第2类不需要经常变动,只有应用需要功能性的迭代时,通过升级资源包发布新版本的方式来变更。

这两种图片有各自不同的优化方式

优化1类图片

  1. 原有的方式不变,即先发交易请求图片访问路径。再展示图片;
  2. 图片需部署在图片服务器上并在服务器设置Etag缓存
  3. 手机银行的资源包缓存机制与webview自身的Etag缓存可以兼容共存,如设置成功,手机端访问图片将收到服务器返回的304响应码,从而转为从本地浏览器缓存获取图片,节约客户流量。

优化2类图片

  1. 将图片全部转移至pmobile项目,例如“首页九宫格”“全部功能”的小图标;
  2. 打包发布后,pmobile资源包将包含这些2类图片,原生客户端会拦截资源包内已有的请求,做到0流量消耗;

完成

你可能感兴趣的:(昆山农商行个人手机银行app前端图片优化方案)