跨平台应用开发进阶(二十八) ：资源加载速度优化解决方案_uniapp如何加快加载图片(1)

从文件开始下载至下载完成，通过控制台看耗时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() {


### 最后

编程基础的初级开发者，计算机科学专业的学生，以及平时没怎么利用过数据结构与算法的开发人员希望复习这些概念为下次技术面试做准备。或者想学习一些计算机科学的基本概念，以优化代码，提高编程技能。这份笔记都是可以作为参考的。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

![名不虚传！字节技术官甩出的"保姆级"数据结构与算法笔记太香了](https://img-blog.csdnimg.cn/img_convert/a3e940acdcd55765852a8bfe54482664.png)