前端性能优化之虚拟列表学习笔记

---

前言

用来记录自己的学习过程，参考网上多篇文章，可能不太完整日后慢慢学习慢慢补充。

此篇介绍的是关于性能优化的虚拟列表部分。用vue来完成一个虚拟列表的简易实现。

---

一、虚拟列表是什么？

简单来说，虚拟列表值得就是【可视区域渲染】的列表。

在有大量数据需要展示在页面上时，通过监听用户的滚动事件，动态地只对可见区域进行渲染，对非可见区域不渲染，从而达到极高的渲染性能。

首先弄清楚两个概念，【可滚动区域】和【可见区域】。

• 可滚动区域：「 整个列表的数据量*每项列表的高度 」真实列表长度这部分区域。即需要展示的数据区域。

假设有 1000 条数据，每个列表项的高度是 30，那么可滚动的区域的高度就是 1000 * 30。当用户改变列表的滚动条的当前滚动值的时候，会造成可见区域的内容的变更。

• 可见区域：设定的列表的高度，用户可见的，需要动态渲染的区域。