小程序长列表性能优化

在小程序官方的文档“性能“一部分中写道

建议一个页面使用少于 1000 个 WXML 节点,节点树深度少于 30 层,子节点数不大于 60 个。一个太大的 WXML 节点树会增加内存的使用,样式重排时间也会更长,影响体验。

但是有一些场景下我们需要”无限“下划,此时越往下划页面上的WXML节点就越多。于是不显示在屏幕上的节点我们可以将其卸载掉。

在微信官方文档中,平台能力-扩展能力-扩展插件-“recycle-view”组件就可以用来解决这个问题,但是我们需要自己写一个方法来传入当前循环的列表组件的尺寸,但是很多时候,我们不能很好的预知即将渲染的组件的确切尺寸。

解决方法

我们在微信官方文档中看到了IntersectionObserver,可以用来监听组件是否和某个区域有交集,我们使用IntersectionObserver IntersectionObserver.relativeToViewport(Object margins)来监控可视区域的所有组件

同时长列表中的每个元素大多为循环,给每一个组件分配一个唯一的id,然后监听这个组件即可:

this.listener = this.createIntersectionObserver()
        this.listener.relativeToViewport({
            top,
            bottom
          }).observe(`#${id}`, (res) => {
            if (res.intersectionRatio == 0) {
              this.setData({
                show: false,
                height: res.boundingClientRect.height
              })
            } else {
              this.setData({
                show: true,
                height: res.boundingClientRect.height
              })
            }
          })

参考recycle-view中在滚动过程中,为了避免频繁出现白屏,会多渲染当前屏幕的前后2个屏幕的内容,所以上面的top和bottom参数为两个屏幕高度。

然后在渲染和卸载时,重新获得组件高度,在下次渲染时基本能够确定高度,设置css min-height为监听器中获得的height,在内容卸载后保持原有高度,防止滚动条发生奇怪的抖动。

由于近期我在外面出差,所以只是大致在原理上讲了讲,在即将写完的时候,发现网上有一篇文章使用了类似的方法,并且还给出了相关示例代码,文章:https://juejin.cn/post/6844904014404927496,GitHub:https://github.com/godaangel/wxapp-long-list

大家可以参考和使用他的解决方法,他的示例代码中没有卸载时的组件高度获取,时间关系,我就不测试是否会出问题了,我认为如果在中途组件高度有变化,在卸载时重新获取一次组件高度似乎更加可行。

小程序图片展示尺寸优化

上一篇

Javascript使用Selenium

下一篇
评论
发表评论 说点什么
还没有评论