用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

优化支付宝小程序图片资源加载、提升性能的几种方式

Rolan 2021-1-21 16:48

图片资源的加载对于小程序整体性能的影响还是比较大的,这里总结下项目中对图片资源加载做的几点优化 图片格式 使用 SVG / webp 格式图片,可以有效降低资源大小和加载耗时。 ... ...

图片资源的加载对于小程序整体性能的影响还是比较大的,这里总结下项目中对图片资源加载做的几点优化 图片格式 使用 SVG / webp 格式图片,可以有效降低资源大小和加载耗时。

需注意 IOS 系统不支持 webp 格式的动图。


图片大小


本地的图片资源可以压缩一下上传。


很多场景下,图片真实尺寸会超出实际展示尺寸很多,如果使用了 oss ,可以通过在图片地址后加查询参数压缩图片,以阿里云为例,可以添加 x-oss-process 参数获取压缩后的图片资源。


这一逻辑可以封装成 sjs 方法,更好的复用:


// axml
<import-sjs from="./index.sjs" name="test" />
<image
    style="{{width: 200rpx; height: 200rpx}}"
    src="{{test.processImg(src, 200, 200)}}"
/>


// sjs
export default {
  processImg(src, width, height) {
        return `${src}?x-oss-process=image/resize,h_${height},w_${width}`;
    },
};


图片懒加载


部分页面可能包含很多图片资源,而进入页面一次性加载所有的图片资源,会降低页面的加载速度。


对于大部分场景而言只需要加载当前可视区域内的图片资源,对可视区域外的图片延迟加载。


onPageScrollIntersectionObserver 都是常见的实现图片懒加载的方式。它们都有同样的缺点,需要调用 setData 。在快速滚动页面的场景下,频繁调用 setData 存在较大性能开销。但这两种方式能够控制图片的加载时机,在需要实现某些复杂的业务逻辑时,还是适用的。


// 通过以上两种方式,在合适的时机设置 visible 值,从而延迟加载图片资源
<image src="{{visible ? 'xxx.png' : 'placeholder.png'}}" />


目前小程序原生支持懒加载,通过设置 image 组件的 lazy-load 属性,可以开启图片的懒加载。


// example
<image src="xxx.png" lazy-load />


使用这种方式需要注意几点:


  1. 只支持 image 组件,不支持通过设置 view 组件的 background-image 样式的展示形式。
  2. 加载时机无法控制:图片资源会在进入可视区域内才加载,如果需要精确的控制图片距离可视区域指定距离加载,则无法做到。
  3. 只能通过滚动屏幕(或者调用 my.pageScrollTo 方法)触发图片资源加载:如下方代码,当点击 buttonview 隐藏,此时 image 在可视区域内,却没有加载。这个触发方式导致如果页面高度在一屏以内,将无法通过滚动页面加载图片。


// axml
<button onTap="toggle">togglebutton>
<view a:if="{{visible}}" class="block" />
<image src="xxx.png" lazy-load />


// acss
.block {
    height: 100vh;
}


// js
Page({
  data: {
    visible: true,
  },
  toggle() {
    this.setData({
      visible: !this.data.visible,
    });
  },
});

图片预加载


对比懒加载对应的延迟加载而言,预加载则是提前加载。如果预先知道小程序中哪些图片资源需要加载,我们可以在合适的时机提前加载这些图片资源。这样当图片展示时,就不需要等待图片加载。


例如可以在弹窗显示前加载弹窗内图片,提升用户体验。在当前页面加载其它页面图片资源,降低其它页面的加载时长。


使用这种方式需要注意几点:


  1. 设置 image 组件样式为 display: none 可以触发图片加载,通过 a:if 隐藏不能触发图片加载。
  2. 预加载要选择合适的时机,不要影响到当前页面的加载时长。


可以将图片预加载功能封装成自定义组件使用


// axml
<view a:if="{{preload}}" style="display: none">
    <imgae
        a:for="{{imgs}}"
        src="{{item}}"
        onLoad="loadImg"
    />
view>


// js
Component({
  props: {
        preload: false, // 选择合适的时机预加载
        imgs: [],
    },
  methods: {
        loadImg() {
            // 在这里可以判断图片是否全部加载完毕、触发回调等
        }
    },
});

文章转载自:支付宝官方社区 作者:颜颜
鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏