广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >小程序多图列表怎么实现性能优化
  • 297
分享到

小程序多图列表怎么实现性能优化

小程序 2022-10-19 04:10:58 297人浏览 安东尼
摘要

小编给大家分享一下小程序多图列表怎么实现性能优化,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!什么造成的性能问题简单的来说: D

小编给大家分享一下小程序多图列表怎么实现性能优化,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

什么造成的性能问题

简单的来说: DOM节点过多 && 图片节点过多

DOM节点过多会造成更多的内存占用. 按照目前的微信小程序限制, 内存占用500M以上会出现卡顿, 甚至闪退. 如果列表中节点没有图片标签, 内存占用现象还不会太明显, 只是DOM节点过多会造成页面渲染耗时增加. 但当列表节点中含有图片时, 内存占用会迅速攀升.

如何解决这两点呢?

对于上面两点, 我们分别有对应的优化思路

1. DOM节点过多.

对于无限加载的页面, 列表中每一个元素都有大量的子节点. 当列表数目增加时, 页面的总节点数会暴增. 以小红书的小程序为例:

小程序多图列表怎么实现性能优化

上图中可以看到, 该页面为很多的卡片组成的列表页面. 假设一个卡片的DOM子节点数为 30, 那么当列表元素加载到1000时, 页面会有 30 * 1000 = 30,000 个DOM节点. 小程序显然是吃不消的 (注: 微信小程序推荐总节点数不超过: 1000)

那我们该如何处理来减少节点数呢?

思路很简单: 我们可以只对用户当前屏幕和上下两屏进行真实内容的加载, 对于其他用户暂时不可见的地方, 用空白的节点进行占位. 这样处理后, 实际有内容的卡片数目不超过5个, 页面的总节点数为: 5 * 30 + 995 = 1145. 相对于之前的节点数有了巨大的改进.

让我们来看看代码的实现

写代码前, 让我们整理一下需要的数据结构.

首先这是一个列表页面, 我们需要一个 List来保存页面显示的数据: showCards. showCards 中只会保存5条真实数据, 其余数据展示以空对象填充.

我们还需要一个保存所有真实数据的List, 这样当用户滑动页面时, 我们才能实时获取需要显示的卡片真实数据: totalCards

Page({
 showCards: [],
 totalCards: []
})

接下来我们来写页面布局部分:

<view wx:for="{{showCards}}"
    wx:key="{{index}}">

  <self-define-component data-card-data="{{item}}">
  </self-define-component>
  
</view>

简单的代码框架就是这样 (这里省略了很多不影响理解思路的代码细节)

我们先实现没有优化DOM节点的代码逻辑. 在页面滑动到最底部时, 向showCards push进新的卡片, 并通过 setData 更新页面. 这样就实现了一个简单的下拉无限加载的列表页面.

async onReachBottom() {
  const newCards = await fetchNewCards();
 this.data.showCards.push(newCards);
 this.setData({
  showCards: this.data.showCards
 })
},

接下来我们实现优化DOM节点的代码逻辑. 我们会再用户滑动页面(onScroll事件) 时, 对当前页面每个card 的位置进行判断, 如果该 card在用户可见范围内的上下两屏内, 则展示真实数据, 否则将其替换为宽高与原卡片一致的空白占位节点.

在 Page 的 onPageScroll 回调中, 我们进行回收函数的调用 (注意这里回调时要进行节流处理, 否则频繁调用会导致页面闪动) . 让我们看看这个回收页面节点函数的主要逻辑:

回调中, 我们首先通过小程序提供的获取页面元素位置的api: createSelectorQuery().boundinGClientRect 来拿到每个卡片的位置信息.

接下来, 我们通过位置信息, 判断是否展示card的真实数据. 对于不展示真实数据的card, 我们需要保存其高度信息, 以便在渲染页面时使用高度信息填充页面. 同时我们给空card一个 type 属性, 方便我们在 wxml中渲染时判断卡片类型.

async onScrollCallback() {
 try {
  const rectList = await this.calcCardsHeight();
  this.recycleCard(rectList);
 } catch (e) {
  console.error(e);
 }
}
 calcFeedHeight() {
  return new Promise((resolve, reject) => {
   this.createSelectorQuery()
    .selectAll(`.card`)
    .boundingClientRect(rectList => {
     resolve(rectList);
    })
    .exec()
  })
 },

 recycleCard(rectList) {
  const newShowCards = [];
  for (let i = 0; i < this.data.showCards.length; i++) {
   const rect = rectList[i];
   if (rect && Math.abs(rectList[i].top - 0) > pageHeight * 2) {
    newShowCards.push({
     type: 'empty-card',
     height: rectList[i].bottom - rectList[i].top
    });
   } else {
     const feed = totalCards[i];
    newShowCards.push(feed);
   }
  }
  this.setData({
   showCards: newShowCards
  });
 }

接下来, 我们要对wxml布局文件进行相应的修改:

 <view wx:for="{{showCards}}"
    wx:key="{{index}}">

  <view wx:if="{{item.type === 'empty-card'}}"
     class="card empty-card"
     >
  </view>

  <self-define-component wx:if="{{item.type !== 'empty-card'}}"
        data-card-data="{{item}}"
        class="card read-card">
  </self-define-component>
  
 </view>

这样, 我们就解决了 DOM节点数目过多的问题. 并且最大限度的不影响用户的体验. (虽然用户快速上下滑动时还是会看到一些空白, 但大多数情况用户不会非常快速的上下滑, 而是阅读内容并慢速滑动)

2. 图片节点过多

通过上面一步的优化, 我们其实已经大幅减少了页面加载的图片数目. 但是有些情况, 我们的列表中的每一个卡片并不是只有一张图, 有时我们的图片组件是一个 swiper. 我们假设每个swiper平均展示10张图片, 那么我们展示5张card的话,<Image/> 节点就有 50 个. 对于一些低端的安卓机, 这样的开销依然会造成卡顿.

那有什么好的优化方案呢? 前面一个问题, 我们的优化思路是在用户看不见的地方, 将节点简化展示.

同样的, 对于swiper控件, 用户能看到的也就是当前图片 以及 滑动可见的左右两张图片. 其余位置的图片是可以简化展示的. 从下图可以看到, 其实需要立即加载的图片只有三张. (红色的框代表的是swiper组件的可视区域)

小程序多图列表怎么实现性能优化

我们使用一个变量记录当前swiper控件展示图片的坐标: curIndex, 然后我们改造一下 wxml布局文件. 代码逻辑很简单, 就是通过判断当前Image 节点的index和swiper展示节点的 index之间距离, 大于2就不显示.

经过这样的处理后, 我们的每个swiper组件, 最多只会有三个占用实际内存的 <Image/> 节点.

   <swiper-item wx:for="{{images}}"
          wx:key="{{index}}">

    <view >
     <image class="img"
         mode="widthFix"
         src="{{index - curIndex < 2 && index - curIndex > -2 ? item.url : ''}}">
     </image>
    </view>
   </swiper-item>

以上是“小程序多图列表怎么实现性能优化”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网JavaScript频道!

--结束END--

本文标题: 小程序多图列表怎么实现性能优化

本文链接: https://www.lsjlt.com/news/71408.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 小程序多图列表怎么实现性能优化
    小编给大家分享一下小程序多图列表怎么实现性能优化,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!什么造成的性能问题简单的来说: D...
    99+
    2022-10-19
    小程序
  • 微信小程序怎么实现列表渲染
    这篇文章主要讲解了“微信小程序怎么实现列表渲染”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“微信小程序怎么实现列表渲染”吧!wx:for通过wx:for可以根据指定的数组,循环渲染重复的组件...
    99+
    2023-07-04
  • 小程序怎么实现多图片上传
    这篇文章主要介绍“小程序怎么实现多图片上传”,在日常操作中,相信很多人在小程序怎么实现多图片上传问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”小程序怎么实现多图片上传”的疑惑有所帮助!接下来,请跟着小编一起来...
    99+
    2023-06-26
  • 小程序地图导航功能怎么实现
    今天小编给大家分享一下小程序地图导航功能怎么实现的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。微信小程序的地址管理中,经常需...
    99+
    2023-06-26
  • 微信小程序如何实现调起键盘性能优化
    这篇文章主要介绍微信小程序如何实现调起键盘性能优化,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!在小程序中,我们经常有调起键盘的操作场景,但是在不同的场景下解决方案不尽相同,还是需要...
    99+
    2022-10-19
    微信小程序
  • 微信小程序中如何实现多列表的显示和隐藏功能
    这篇文章将为大家详细讲解有关微信小程序中如何实现多列表的显示和隐藏功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。效果图:实现思路:实现单个列表的显示和隐藏应该使用唯一...
    99+
    2022-10-19
    微信小程序
  • 微信小程序怎么实现商品列表跳转商品详情页功能
    这篇文章主要介绍“微信小程序怎么实现商品列表跳转商品详情页功能”,在日常操作中,相信很多人在微信小程序怎么实现商品列表跳转商品详情页功能问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”微信小程序怎么实现商品列表...
    99+
    2023-06-30
  • 微信小程序地图定位功能怎么实现
    本篇内容主要讲解“微信小程序地图定位功能怎么实现”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“微信小程序地图定位功能怎么实现”吧!方法如下首先呢你要有一个方法去触发这个点击事件,下面已经写好啦,...
    99+
    2023-06-30
  • 微信小程序图片上传功能怎么实现
    这篇文章主要介绍“微信小程序图片上传功能怎么实现”,在日常操作中,相信很多人在微信小程序图片上传功能怎么实现问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”微信小程序图片上传功能怎么实现”的疑惑有所帮助!接下来...
    99+
    2023-06-30
  • 小程序滚动加载更多功能怎么实现
    本篇内容主要讲解“小程序滚动加载更多功能怎么实现”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“小程序滚动加载更多功能怎么实现”吧!需要用到的组件和apiscroll-view(可滚动视图区域)w...
    99+
    2023-06-26
  • 微信小程序中怎么实现一个picker多列选择器
    微信小程序中怎么实现一个picker多列选择器,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。一、效果图(多列)二、普通选择器:mode = selector、多列选择器:m...
    99+
    2023-06-20
  • 微信小程序中怎么实现一个固定表头、列表格组件
    微信小程序中怎么实现一个固定表头、列表格组件,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。实现思路开始想用三个ScrollView去实现滚动联动,固定表头、列的话,表格内容...
    99+
    2023-06-20
  • 微信小程序怎么实现多文件或图片上传
    本文小编为大家详细介绍“微信小程序怎么实现多文件或图片上传”,内容详细,步骤清晰,细节处理妥当,希望这篇“微信小程序怎么实现多文件或图片上传”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。html<view&...
    99+
    2023-07-02
  • 微信小程序怎么实现地图标记多个位置
    这篇文章主要介绍了微信小程序怎么实现地图标记多个位置的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇微信小程序怎么实现地图标记多个位置文章都会有所收获,下面我们一起来看看吧。1 问题如何在微信小程序实现标记多个位...
    99+
    2023-06-30
  • 微信小程序怎么实现在地图上多地点标识
    这篇文章主要介绍了微信小程序怎么实现在地图上多地点标识的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇微信小程序怎么实现在地图上多地点标识文章都会有所收获,下面我们一起来看看吧。以下是具体做法:wxml1&nbs...
    99+
    2023-06-26
  • 怎么在小程序中实现保存图片组件功能
    这篇文章主要讲解了“怎么在小程序中实现保存图片组件功能”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么在小程序中实现保存图片组件功能”吧!思路首先声明下组件采用的是uniapp,具体实现了...
    99+
    2023-06-25
  • 微信小程序怎么实现滚动加载更多功能
    这篇文章主要为大家展示了微信小程序怎么实现滚动加载更多功能,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带大家一起来研究并学习一下“微信小程序怎么实现滚动加载更多功能”这篇文章吧。 需要用到的组件和apiscrol...
    99+
    2023-06-26
  • 小程序生成海报保存分享图片功能怎么实现
    这篇文章主要介绍“小程序生成海报保存分享图片功能怎么实现”,在日常操作中,相信很多人在小程序生成海报保存分享图片功能怎么实现问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”小程序生成海报保存分享图片功能怎么实现...
    99+
    2023-06-26
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作