写点什么

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

  • 2022-12-20
    江苏
  • 本文字数:1249 字

    阅读完需:约 4 分钟

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

一、前言

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

三、拓展阅读

发布于: 2022-12-20阅读数: 15
用户头像

No Silver Bullet 2021-07-09 加入

岂曰无衣 与子同袍

评论

发布
暂无评论
跨平台应用开发进阶(二十八) :资源加载速度优化解决方案_跨平台_No Silver Bullet_InfoQ写作社区