基于安全和性能视角的图片加载接口设计(相册与网盘服务)

本文涉及的产品
对象存储 OSS,20GB 3个月
文件存储 NAS,50GB 3个月
日志服务 SLS,月写入数据量 50GB 1个月
简介: 背景 移动端app, 对于图片的加载是必不可少的一个需求之一,在我们开发的app中可能对于图片的资源有一定的安全需求,图片的地址是需要app业务服务这边做过签名等机制才允许访问使用,基于这个我们使用阿里云oss的签名方式来使用,服务端将签好名的地址直接图给客户端,即可加载成功,但是这样在客户端场景中使用上还是有一些比较难受的痛点。

背景

移动端app, 对于图片的加载是必不可少的一个需求之一,在我们开发的app中可能对于图片的资源有一定的安全需求,图片的地址是需要app业务服务这边做过签名等机制才允许访问使用,基于这个我们使用阿里云oss的签名方式来使用,服务端将签好名的地址直接图给客户端,即可加载成功,但是这样在客户端场景中使用上还是有一些比较难受的痛点。

1.客户端需要关心图片签名地址的失效时间。
2.图片地址在每次重新获取时,都是不一样的,因此客户端无法做一层本地cache
3.客户端需要不断的去获取新地址,然后再发起加载图片的动作,增加了部分网络消耗

解决方案

简单的流程图
image

我们上传成功后,每个图片都有对应的id
1.通过上边这个流程下来,我们对外提供一个获取缩略图的接口,此接口客户端通过拼接id即可调用,客户端就可以成功加载图片。
2.接口本身是有权限token机制控制,这块需要客户端传递,统一登录获取的,过期可以统一处理。
3.通过这种方式,生成的图片加载地址,同一个图片是不会变的,因此客户端也可以进行cache,大大提升了客户端的加载速度。
4.后端也可以做到对请求的信息的统计,中间可以做很多安全的事情,如对热点数据的统一处理,也可以做一些流量限制的事情。

改造后的对比:

1.开发复杂度上,几乎对于客户端开发同学来说,什么都不需要关心了,只需要关心拼接地址即可。
2.对于客户端来说请求一次即可,并且有了cache,大大降低了流量损耗,提升了近30%的加载效率。
3.节省了图片列表接口返回信息的大小,因为原先的url还是比较长的,列表页返回的response相对多一些。

不足之处

目前的接口仍有不足之处,首先接口必须通过header方式将鉴权信息传进来才可使用, 这个导致前端网页标签方式加载图片无法使用。

目录
相关文章
|
存储 前端开发 定位技术
前端加载超大图片实现秒开解决方案
前端加载超大图片实现秒开解决方案
|
数据库
手把手教你云相册项目简易开发day4-上传下载业务逻辑之缩略图上传下载业务和审核业务(下)
手把手教你云相册项目简易开发day4-上传下载业务逻辑之缩略图上传下载业务和审核业务(下)
64 0
|
7天前
|
缓存 前端开发 JavaScript
前端优化网站加载速度的具体操作流程是什么?
在实际操作过程中,需要根据网站的具体情况和需求,灵活选择和应用相应的优化方法,并不断进行测试和调整,以达到最佳的优化效果。
|
存储 消息中间件 Java
手把手教你云相册项目简易开发day4-上传下载业务逻辑之缩略图上传下载业务和审核业务(上)
手把手教你云相册项目简易开发day4-上传下载业务逻辑之缩略图上传下载业务和审核业务
107 0
|
2月前
|
图形学 开发者 搜索推荐
Unity Asset Store资源大解密:自制与现成素材的优劣对比分析,教你如何巧用海量资产加速游戏开发进度
【8月更文挑战第31天】游戏开发充满挑战,尤其对独立开发者或小团队而言。Unity Asset Store 提供了丰富的资源库,涵盖美术、模板、音频和脚本等,能显著加快开发进度。自制资源虽具个性化,但耗时长且需专业技能;而 Asset Store 的资源经官方审核,质量可靠,可大幅缩短开发周期,使开发者更专注于核心玩法。然而,使用第三方资源需注意版权问题,且可能需调整以适应特定需求。总体而言,合理利用 Asset Store 能显著提升开发效率和项目质量。
66 0
|
6月前
|
存储 弹性计算 关系型数据库
阿里云网盘与相册服务提供了丰富的功能和灵活的使用方式
阿里云网盘与相册服务提供了丰富的功能和灵活的使用方式【1月更文挑战第13天】【1月更文挑战第61篇】
102 2
图片压缩后,依然很大的解决方案
图片压缩后,依然很大的解决方案
102 0
|
编解码 人工智能 前端开发
如何实现丝滑转码?
如何实现丝滑转码?
62 0
|
JavaScript 开发者
ElUpload不好用?一文教你实现一个简易图片上传预览组件
ElUpload不好用?一文教你实现一个简易图片上传预览组件
408 0
|
前端开发 Java
在线相册的前后端交互
在线相册的前后端交互
182 0
在线相册的前后端交互