<view wx:for="{{showCards}}" wx:key="{{index}}"> <view wx:if="{{item.type === 'empty-card'}}"> </view> <self-define-component wx:if="{{item.type !== 'empty-card'}}" data-card-data="{{item}}"> </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 mode="widthFix" src="{{index - curIndex < 2 && index - curIndex > -2 ? item.url : ''}}"> </image> </view> </swiper-item>
最后
以上就是我在这次性能优化中用到的一些小技巧, 希望能为你带来一些帮助 :)
如果你对我的文章感兴趣, 这里有我的一些 数据可视化， D3.js 方面的文章， 欢迎 fork && star：