vue-virtual-scroller 提供了以下几个组件： RecycleScroller 是一个仅呈现列表中可见项目的组件。 它还重用组件和 dom 元素，以尽可能提高效率和性能。 Dynami

大家好，我是 simple ，最近在使用 Vite4.0 构建一个中型前端项目的过程中，遇到了一些坑，也做了一些项目在构建生产环境时的优化，在这里做一个记录，以便后期查阅。(完整配置在后面)

提升首屏的加载速度，是前端性能优化中最重要的环节，这里笔者梳理出一些 `常规且有效` 的首屏优化建议 通过对比优化前后的性能变化，来验证方案的有效性，了解并掌握其原理

一、使用背景 业务开发中存在长列表显示需求，一些用户的聊天列表会出现几千条数据的情况，也就意味着要一次性渲染几千条数据，造成明显的卡顿，这时就有必要对聊天列表进行性能优化来提升用户体验。 对于这种需求

Vue3 + TS 简易封装 Tree 组件，实现基本的展开收缩、级联选择、异步加载、虚拟滚动等效果。

使用一般的tree组件渲染大量数据（如几千个树节点）的时候会非常卡顿，vue 实现 tree 树形大量数据的虚拟滚动（包含树的搜索，勾选）

前文中我们使用 虚拟列表 优化了海量数据的显示，但实际情况并没有那么简单。不定高的列表元素该怎么获取真实高度？滚动时为什么会出现白屏闪烁？异步加载的数据要怎么处理？一次性请求大量数据是否合理？

在前端工作中免不了接触到虚拟列表，本文通过简单易懂的图和代码手把手教大家实现三种虚拟列表。看完本文，相信各位随手就能撸出一个虚拟列表！

本文将对虚拟滚动进行简要介绍，并基于ant design vue table组件，为其添加上虚拟滚动的功能