微信小程序实现virtual-list方法详解，有哪些长尾词技巧？

本文共计2219个文字，预计阅读时间需要9分钟。

【相关学习推荐：微信小程序教程】背景：微信小程序在多种场景下会遇到长列表交互，当页面渲染过多的wxml节点时，可能导致小程序页面卡顿和白屏。主要原因包括以下几点：

背景

小程序在很多场景下面会遇到长列表的交互，当一个页面渲染过多的wxml节点的时候，会造成小程序页面的卡顿和白屏。原因主要有以下几点：

1.列表数据量大，初始化setData和初始化渲染列表wxml耗时都比较长；

2.渲染的wxml节点比较多，每次setData更新视图都需要创建新的虚拟树，和旧树的diff操作耗时比较高；

3.渲染的wxml节点比较多，page能够容纳的wxml是有限的，占用的内存高。

微信小程序本身的scroll-view没有针对长列表做优化，官方组件recycle-view就是一个类似virtual-list的长列表组件。现在我们要剖析虚拟列表的原理，从零实现一个小程序的virtual-list。

实现原理

首先我们要了解什么是virtual-list，这是一种初始化只加载「可视区域」及其附近dom元素，并且在滚动过程中通过复用dom元素只渲染「可视区域」及其附近dom元素的滚动列表前端优化技术。相比传统的列表方式可以到达极高的初次渲染性能，并且在滚动过程中只维持超轻量的dom结构。