一，关于虚拟滚动

虚拟滚动是一种优化大型列表或数据集渲染的技术，它只渲染用户当前可见区域内的元素，而不是整个列表。这种技术可以显著提高性能，减少内存占用，并改善用户体验。

在传统的滚动列表中，无论列表中有多少元素，浏览器都会尝试一次性渲染所有元素。当数据量非常大时，这可能导致页面加载缓慢、卡顿甚至崩溃。虚拟滚动通过只渲染当前视口内的元素来解决这个问题，从而避免了不必要的渲染和内存占用。

虚拟滚动通常结合了以下几个关键概念：

1.1可见区域管理：

     虚拟滚动库会跟踪用户当前可见的部分，并只渲染这部分内容。

1.2 重用元素：

     当用户滚动时，虚拟滚动库会重用已经离开可见区域的元素，并将其移动到新位置以显示新的数据。

1.3 性能优化：

      通过仅渲染可见区域内的元素，虚拟滚动可以大大提高性能并减少内存占用。

1.4无限滚动加载：

     一些虚拟滚动库还支持无限滚动加载更多数据，从而实现平滑的加载体验。

二，vue-virtual-scroller

2.1.常用于数据量过多渲染

          在后端对数据进行分页处理然后返回给前端。

          页面请求数据的时候定时不间断的请求数据

         requestAnimationFrame会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，requestAnimationFrame来进行分批渲染。感兴趣的具体可以自行去了解

        利用虚拟列表的方式来进行数据渲染处理

2.2 vue-virtual-scroller 来实现对于数据量过大的渲染处理

(1) 安装依赖  

npm install --save vue-virtual-scroller 

 (2) 依赖安装完后在main.js中进行引用

import VueVirtualScroller from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
Vue.use(VueVirtualScroller)

     注意对于css的引入

import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'

（3）正式的应用

 <!-- buffer：默认 200。在列表外额外要多渲染的 px 数。 -->
        <!-- itemSize：默认 null。item 的高度，用来计算滚动列表的高度和位置。如果设置为 null，则会使用多尺寸模式。 -->
        <!-- keyField：默认 id。用于标识 items 和优化渲染视图 -->
        <!-- :min-item-size="80" //最小高度 -->
        <!-- pageMode：默认 false。是否开启 Page mode 模式。 -->


<recycle-scroller 
            :buffer="1000" 
            style="height: 760px;width: 100%; margin-top: 44px;"
            :item-size="106" 
            key-field="id" 
            :items="tableData">
            <template v-slot="{ item }">
                {{item.num}}
            </template>
</recycle-scroller>


  data() {
    return {
      //数据接收
      tableData: []
    }
  },
  // 模拟后端数据返回
  mounted() {
        for (let i = 0; i < 100000; i++) {
            this.tableData.push({ id: i,num:i})
        }
    },

2.3流行的虚拟滚动库可用于 Vue.js

1. vue-virtual-scroll-list: 这个库提供了一个简单易用的虚拟滚动列表组件，可以处理大型数据集的渲染，并支持无限滚动和自定义加载项。它易于集成到 Vue.js 应用程序中。

2. vue-virtual-scroll-table: 如果您需要一个支持表格布局的虚拟滚动库，这个库是一个不错的选择。它允许您以表格形式呈现大量数据，并且能够高效地处理大型表格的渲染。

3. vue-recyclerview: 这是一个基于 RecyclerView 的虚拟滚动库，专门为处理大型数据集而设计。它提供了高性能的列表和网格布局，并且支持无限滚动、下拉刷新等功能。

4. vue-infinite-loading: 虽然不是严格意义上的虚拟滚动库，但它提供了无限滚动加载更多内容的功能，并且可以与大型数据集一起使用。适合于需要实现无限滚动加载的场景。

 (4)对应的参考仓库

前端性能优化 - LionelMesssi30 (lionelmesssi30) - Gitee.com