资源加载速度优化解决方案

举报
SHQ5785 发表于 2023/03/26 19:24:11 2023/03/26
【摘要】 一、前言uni-app开发APP实现上架后,后续面临一系列优化工作事项,其中,动态图片、视频加载慢就是亟需解决的用户体验差问题。图片加载过程为:调用后台接口,获取动态图片url;根据后台接口返回的url,前端应用uni.downloadFile实现下载文件资源到本地,并返回下载地址。从文件开始下载至下载完成,通过控制台看耗时6s!只是一张普通的图片,居然耗时如此长时间,不可思议。 二、解决...

一、前言

uni-app开发APP实现上架后,后续面临一系列优化工作事项,其中,动态图片、视频加载慢就是亟需解决的用户体验差问题。

图片加载过程为:

  1. 调用后台接口,获取动态图片url;
  2. 根据后台接口返回的url,前端应用uni.downloadFile实现下载文件资源到本地,并返回下载地址。

从文件开始下载至下载完成,通过控制台看耗时6s!只是一张普通的图片,居然耗时如此长时间,不可思议

在这里插入图片描述

二、解决方案

当然,网络资源下载要同时考虑文件大小及设备网速带宽等因素。

优化事项:对于比较固定的动态资源,建议走本地缓存,若发现本地缓存与服务端返回资源ID不同,代表资源已更新,则需要同步更新本地缓存并做前端资源同步更新展示。若服务端返回的资源ID与本地缓存一致,则表明服务端资源更新,前端直接读取本地缓存做前端展示即可,通过减少资源频繁下载动作,提升了图片资源渲染性能,用户体验同时得到提升。

注⚠️:文件的临时路径,在应用本次启动期间可以正常使用,如需持久保存,需在主动调用uni.saveFile,才能在应用下次启动时访问得到。

实操代码如下:

api.getInfoDetail({resourceId: resourceId}).then(res => {
    if (res.code === 0) {
        this.detailData = res.data;
        // 处理方式是先下载到本地再获取临时路径并持久化至本地
        // 先判断对应的resourceId 是否已经下载
		try {
			const value = uni.getStorageSync(this.resourceId + '');
			if (value) {
				console.log('内部存储获取成功,存储数据:', value)
				this.tempFilePath = value;
			} else {
				throw new Error("ending");
			}
		} catch (err) {
			console.log('内部存储获取失败,失败原因:', err)
			const downloadUrl = getBaseURL() + res.data.thumbnailUuid.slice(1)
			console.log('资源下载地址:', downloadUrl)
			uni.downloadFile({
				url: downloadUrl,
				success: (val) => {
					if (val.statusCode === 200) {
						this.tempFilePath = val.tempFilePath;
						console.log('资源下载成功,临时存放路径:', this.tempFilePath)
						// 临时下载成功后,持久化文件至本地
						let that = this;
						uni.saveFile({
						  tempFilePath: that.tempFilePath,
						  success: function (res) {
							console.log('持久化数据成功,资源存放路径:', res.savedFilePath)
							that.setImgCheckedObj(res.savedFilePath)
						  }
						});
					}
				},
				fail: (err) => {
					console.log('资源下载失败,失败原因:', err);
				}
			})
		}
    }
})

setImgCheckedObj(savedFilePath) {
	uni.setStorage({
		key: this.resourceId + '',
		data: savedFilePath,
		success() {
			console.log('存储数据成功!')
		}
	})
}

三、拓展阅读

【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。