跨平台应用开发进阶(二十八) :资源加载速度优化解决方案

一、前言

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

图片加载过程为:

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

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

二、解决方案

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

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

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

实操代码如下:

javascript 复制代码
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('存储数据成功!')
		}
	})
}

三、拓展阅读

相关推荐
我要洋人死1 小时前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人1 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人1 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR1 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香1 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596931 小时前
前端预览word、excel、ppt
前端·word·excel
小华同学ai1 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_9152 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼3 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
逐·風7 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#