小程序中实现视图懒加载
前言
在写小程序时，有个页面由于要展示很多内容，光弹窗都6个，还有大量的列表，所以wxml节点数很多，超过了小程序建议的1000个节点以下。
此懒加载示例项目代码已放到 github 和 码云 上
问题
这个内容很多的页面是分包的第一个页面，再此之前开发工具上能正常的运行，因此没有去管它。但是在上周六（2020年1月16日）后，开发工具上就出问题了！！！进入这个分包页面，视图半天才渲染，但事件是会立即执行的（看点击事件及接口请求情况得出的结论）。由于代码和前一天相比没有改动，并且手机上是正常的，所以第一时间就怀疑是不是开发工具出问题了，于是就删掉了工具，并重新下载了两次（一次最新稳定版，一次最新预发布版本），可还是不管用，依然这分包的这个页面，渲染不出来。 之后，又将手机的性能监听面板打开，发现再次渲染耗时那数值一直在闪动，但始终停留在0ms，就肯定的是小程序渲染出问题了。又怀疑只要是分包页面都有问题，就发现其他分包页面，并没有问题。 然后，想着之前用体验评分时，已经提示了wxml节点数过多，就试探性的注释了一些代码。好家伙，开发工具立马就正常了。 在确定问题前，没有第一时间考虑自己代码的问题，因为就过了一天开发工具就不能运行了，这确实很奇怪。
优化代码
初次渲染时，并不需要全部都渲染出来，所以可以做懒加载，显示时再渲染，通过 wx:if 来控制是否显示。
通过测试，做了懒加载后的体验评分在性能上是比不做要高的。下面是两张对比图：
没有使用懒加载
使用了懒加载
项目地址：
懒加载原理
小程序通过setData后的数据，再放入wxml上就会被渲染，但是我们可以通过设置wx:if让，节点不显示，就不会去渲染。当滚动触底后，再通过一个标识值来判断后续的渲染情况。
此例子中与只有触底后渲染下面的视图，再加了点击左边的分类时，也做做渲染。
比如：初始时只渲染了第一组数据，当时我点击了第四个分类时，要将第二个，第三个，第四个的数据都显示出来。 这也是通过这个标识值来判断。
示意图：
