vue2 - vue虚拟滚动列表vue-virtual-scroller滚动卡顿的问题？

Question

项目vue2用到了虚拟滚动列表vue-virtual-scroller，需要用到动态高度组件，DynamicScroller，写完后，发现页面加载不卡顿了，但是这个滚动又很卡顿。不管时拖动滚动条，还是通过滑轮滚动，都有非常明显的卡顿，请问怎么处理？

Answer 1

根据 GitHub 上的 vue-virtual-scroller 仓库信息，以下是一些主要版本：

• 1.0.0: 初始稳定版本
• 1.0.17: 最新的稳定版本
• 1.1.2: 另一个常用版本
• 2.0.0-beta.8: 最新的测试版

1.1.2：有用户报告在使用 DynamicScroller 组件时，滚动会出现卡顿。
1.0.0：作为初始稳定版本，可能在处理大数据量时性能不佳。

推荐用1.0.17稳定版本

npm install vue-virtual-scroller@1.0.17

Answer 2

### 回答

针对 `vue-virtual-scroller` 在使用 `DynamicScroller` 时出现的滚动卡顿问题，可以尝试以下几种解决方案：

1. **优化项目性能**：
   - 确保其他部分的代码没有性能瓶颈，比如不必要的复杂计算、大量的数据监听等。
   - 使用 Vue 的性能分析工具（如 Vue DevTools）来检查组件的性能问题。

2. **调整 `vue-virtual-scroller` 的配置**：
   - 检查 `buffer` 配置项，适当调整缓冲区的大小，确保在滚动时不会频繁地重新渲染。
   - 如果列表项高度差异较大，可以尝试调整 `estimateSize` 或确保 `itemHeight` 函数能够更准确地估计高度。

3. **减少渲染复杂度**：
   - 简化列表项的 DOM 结构，减少不必要的嵌套和复杂样式。
   - 使用 CSS 硬件加速特性，如 `transform` 和 `will-change` 属性。

4. **使用防抖/节流技术**：
   - 在滚动事件处理函数中使用防抖（debounce）或节流（throttle）技术，以减少滚动时触发的事件频率。

5. **升级依赖**：
   - 确保 `vue-virtual-scroller` 和 Vue 的版本是最新的，因为新版本可能修复了已知的性能问题。

6. **检查外部因素**：
   - 排除浏览器或设备性能问题，尝试在不同的浏览器和设备上测试。
   - 检查是否有其他 CSS 或 JavaScript 代码影响了滚动性能。

如果上述方法都不能解决问题，可以考虑在 `vue-virtual-scroller` 的 GitHub 仓库中提交 issue，寻求社区的帮助或查看是否有已知的问题和解决方案。