虚拟列表如何优化性能？

.virtual-scroller{border:solid1px#eee;顶部边距：10px；高度：600px；溢出：自动；}.虚拟高度{背景：红色；显示：弹性；对齐项目：结束；fy-内容：居中；颜色：#fff；}ul{列表样式：无；填充：0；margin:0;}li{outline:solid1px#fff;背景色：#000；颜色：#fff；}前言一个简单的场景模拟（不考虑）：A：假设现在有10万条数据，你作为前端如何优化这个大数据列表？B：大数据列表一般不会顺序加载，会通过上拉加载、分页加载等方式进行优化。到至少100,000个dom节点，你认为渲染一个至少有100,000个dom节点的页面的性能如何？A：如果有n个这样的列表怎么办？还有其他优化方法吗？B：我自己优化一下怎么样……其实要解决上面的问题，可以使用虚拟滚动来实现优化。这个名词相信大家都不陌生，但是因为这个名词比较短小（就是virtual和Scrolling）导致很多人觉得这个很高大上很难理解，其实恰恰相反。本文旨在帮助大家以最简单的方式理解虚拟滚动，甚至实现虚拟滚动。虚拟滚动（VirtualScrolling）的核心优化方法：限制文档中渲染列表的数量，即固定渲染的DOM数量，动态切换数据内容实现视图的更新，保证渲染列表的数量文档中的真实DOM不会随着数据量的增加而增加。要理解虚拟滚动，理解虚拟滚动这个词其实很简单。按照virtual和scrolling两个部分来理解就很简单了。下面就一一拆解。virtual通常在页面列表中，要渲染的列表数量和文档中实际存在的DOM节点数量是1:1。每个列表项高度相同（假设为30px），这个列表容器中需要完全渲染的列表数（假设为100）与页面中的高度一致，即高度在这次是100*30=3000，列表对应的DOM个数为100，如：对于虚拟滚动，virtual是指实际要渲染的完整列表对应的高度是通过virtual计算出来的，并不代表即文档中有相应数量的DOM节点。上面的栗子对应的是虚拟滚动，也就是说完整列表实际渲染对应的高度还是100*30=3000，但是实际渲染个数变成了10。关系图大致如下：滚动很好的我明白了，因为列表可视区域通常会限制一定的高度，即列表可视区域的高度，那么只要虚拟列表的高度大于列表可视区域的高度，滚动条将生成并发生滚动操作。值得注意的是，在发生滚动时需要对实际渲染列表做一些处理，否则会导致实际渲染列表和虚拟列表区域分离。例如：关键点是保证实际渲染的列表始终存在于列表可视区域，动态切换需要渲染的列表数据。实现虚拟滚动的核心步骤是设置列表containerHeight可见区域的高度设置单个列表项的高度listItemHeight计算渲染完整列表所需的高度virtualHeight，即virtualHeight=listItemHeight*data.length设置真实渲染数据的起始索引startIndex和endIndex，使用从列表数据data中获取对应的数据内容注册/监听滚动事件onScroll获取当前实际滚动距离eleScrollTop使用eleScrollTop作为translateY的值，即翻译值实际渲染的列表元素，保证实际渲染的列表元素始终存在于可见区域根据实际滚动距离eleScrollTop，动态计算列表新的起始索引startIndex和endIndex。具体实现细节效果预览在下面的代码中，可以结合注释阅读：//App.vue//VirtualScroll.vue.virtual-scroller{border:solid1px#eee;顶部边距：10px；高度：600px；溢出：自动；}.虚拟高度{背景：红色；显示：弹性；对齐项目：结束；fy-内容：居中；颜色：#fff；}ul{列表样式：无；填充：0；margin:0;}li{outline:solid1px#fff;背景色：#000；颜色：#fff；}最后，虚拟滚动并不难理解，就像CSS中的BFC、JavaScript中的闭包等概念一样。就这样。上面的实现方式是极简的，没有做任何优化，也没有考虑额外的场景，因为这篇文章的目的就是通过最简单的实现来解释虚拟滚动到底是什么。所以不要太纠结。当然，基于vue-virtual-scroller等vue相关库的实现，大家可以自行了解。