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

---

前言

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

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

---

一、虚拟列表是什么？

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

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

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

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

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

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

---

二、用vue实现一个简单的虚拟列表

虚拟列表的实现，实际上就是在首屏加载的时候，只加载可视区域内需要的列表项，当滚动发生时，动态通过计算获得可视区域内的列表项，并将非可视区域内存在的列表项删除。

整体代码部分

---

总结

---

参考链接

再谈前端虚拟列表的实现：https://zhuanlan.zhihu.com/p/34585166.

「前端进阶」高性能渲染十万条数据(虚拟列表)：https://juejin.cn/post/6844903982742110216#heading-3