小程序中对初始时渲染太多wxml节点数做懒加载是很有必要的!这是一个真实案例。
发布于 3 年前 作者 pengxia 1540 次浏览 来自 分享

前言

在写小程序时,有个页面由于要展示很多内容,光弹窗都6个,还有大量的列表,所以wxml节点数很多,超过了小程序建议的1000个节点以下。

懒加载示例项目代码已放到 github 和 码云 上

问题

这个内容很多的页面是分包的第一个页面,再此之前开发工具上能正常的运行,因此没有去管它。但是在上周六(2020年1月16日)后,开发工具上就出问题了!!!进入这个分包页面,视图半天才渲染,但事件是会立即执行的(看点击事件及接口请求情况得出的结论)。由于代码和前一天相比没有改动,并且手机上是正常的,所以第一时间就怀疑是不是开发工具出问题了,于是就删掉了工具,并重新下载了两次(一次最新稳定版,一次最新预发布版本),可还是不管用,依然这分包的这个页面,渲染不出来。
之后,又将手机的性能监听面板打开,发现再次渲染耗时那数值一直在闪动,但始终停留在0ms,就肯定的是小程序渲染出问题了。又怀疑只要是分包页面都有问题,就发现其他分包页面,并没有问题。
然后,想着之前用体验评分时,已经提示了wxml节点数过多,就试探性的注释了一些代码。好家伙,开发工具立马就正常了。
在确定问题前,没有第一时间考虑自己代码的问题,因为就过了一天开发工具就不能运行了,这确实很奇怪。

优化代码

初次渲染时,并不需要全部都渲染出来,所以可以做懒加载,显示时再渲染,通过 wx:if 来控制是否显示。

通过测试,做了懒加载后的体验评分在性能上是比不做要高的。下面是两张对比图:

没有使用懒加载

使用了懒加载

项目介绍:

如上图要实现的效果是,初始渲染时,只渲染__玄幻栏目__的数据,当往下滑动快触底时,再渲染下一个。如果初始渲染完成后,点击第四个__都市栏目__,则需把二三四个栏目都渲染出来。

懒加载原理

小程序通过setData后的数据,再放入wxml上就会被渲染,但是我们可以通过设置wx:if让,节点不显示,就不会去渲染。当滚动触底后,再通过一个__标识值__来判断后续的渲染情况。

此例子中与只有触底后渲染下面的视图,再加了点击左边的分类时,也做做渲染。

比如:初始时只渲染了第一组数据,当时我点击了第四个分类时,要将第二个,第三个,第四个的数据都显示出来。 这也是通过这个__标识值__来判断。

示意图:

项目地址:

github地址

码云地址

回到顶部