什么是虚拟滚动技术？

前端虚拟滚动技术是一种高效的网页性能优化方案，特别适用于需要显示大量数据的场景，例如，长列表、表格或图像库。它只渲染用户当前视野中可见的元素，显著减少DOM节点的数量，从而提高页面加载速度和用户交互的流畅性。

1. 为什么需要虚拟滚动？

对于绝大多数场景，前端从服务端获取指定页码的数据，然后渲染，一般来说，几十个，当然，此时不会出现性能问题。但在某些特定的场景或应用程序中，需要加载大数据进行分析，渲染一次可能需要数万甚至数十万的数据;作者真的做过这样的项目�是关于心电大数据分析的），此时，虚拟滚动技术已派上用场！

首先，使用谷歌开发者工具来测试一次性渲染 10 一万个数据的性能如何，如何测试可以参考这篇文章：如何找到和解决前端内存泄漏问题f; - 详细说明排查和分析技巧。

从图中可以看出󿀌Rendering 也就是说，渲染时间达到了 3094ms，渲染的节点 Nodes 也达到了惊人的目的 50多万个。因此，我们可以得出结论：一次渲染大量内容对性能的影响是致命的，即使渲染出来滚动，也是卡顿，严重影响用户体验！根据谷歌。因此，我们可以得出结论：一次性渲染大量内容对性能的影响是致命的，即使渲染出来滚动，也是卡顿，严重影响用户体验！根据谷歌。RAIL性能模型。：加载时页面的基本内容应在 1 #xfff000秒内加载完成c;并应保持用户的输入响应速度。

2. 实现。

从上图可以知󿀌最耗时的步骤是渲染，我们可以从这里开始󿀌部分内容只能通过动态渲染看到。

如下图所示，󿀌虽然元素总数为1万，但用户实际上只看到3-12，那为什么要一次渲染所有࿱呢？f;直接按需渲染可以大大降低渲染成本，减少渲染时间！

分为以下步骤，具体实现请参考第 2.1-2.3 小节：

1. 在容器中放置一个与10万个元素总高度相同的盒子，打开容器࿰的功能c;允许容器拥有与10万条数据相同的滚动条，方便滚动事件的操作。
2. 滚动事件时的动态计算需要实际渲染的起始索引，从而获得实际渲染的元素。
3. 滚动事件时的动态计算需要实际渲染的起始索引，从而获得实际渲染元素。

在滚动过程中动态计算实际渲染元素的偏移量。

2.1 实现步骤1。 在父盒里放一个子盒子，它的功能是打开容器，方便触发原始滚动事件󿀌以下类名对应。virtual_content。

盒子，高度取决于元素的数量 * 每个元素的高度得到󿀌下面采用 Vue3 演示语法，#xff1的结构如下a;real_content。

在元素的风格中。

 

3. 结果。如下图所示，󿀌Rendering 渲染时长由 3094ms 降到了 38ms󿀌渲染的节点 Nodes 也从50多万减少到了 1780&xff00c;不是很开心吗？#xff0101;原文：https://juejin.cn/post/7433257066557456394。