Vue+TS 实现虚拟列表
内容提要
虚拟列表技术通过动态计算和按需渲染，解决了大量DOM元素导致的性能问题。其核心思想是根据可视区域渲染部分数据，分为定高和不定高两种类型。实现过程中，使用原生JS创建虚拟列表，计算可视区域高度、渲染项数，并绑定滚动事件以动态更新内容，从而提升页面性能，避免卡顿和白屏现象。
延伸解读
虚拟列表的适用场景与性能收益
虚拟列表通过只渲染可视区域内的元素，大幅减少DOM数量，从而降低内存占用和重绘开销。文章指出，传统滚动增量渲染会导致DOM堆积，性能问题依旧。虚拟列表适合长列表、图片流等场景，能有效避免卡顿和白屏。但需注意，它增加了计算逻辑，在列表项极少时可能反而带来额外开销。
定高与不定高实现的关键差异
定高虚拟列表假设每项高度固定，计算简单，直接通过scrollTop除以itemHeight得到起始索引。不定高则需要维护位置信息数组，通过二分查找确定起始索引，并在渲染后更新实际高度和偏移量。文章强调，不定高需预设平均高度，且预设值应偏小，以避免渲染数量不足。两者核心都是动态计算startIndex和endIndex。
滚动性能优化与事件处理
文章使用requestAnimationFrame实现滚动节流，避免频繁触发重绘。同时，通过transform: translateY模拟滚动，而非改变top值，以利用GPU加速。对于不定高列表，更新位置信息时需累加高度差偏移量，并更新后续所有项的位置。这些优化能显著提升滚动流畅度，但需注意在数据量极大时，位置信息的更新可能成为性能瓶颈。
虚拟瀑布流的实现要点
虚拟瀑布流结合了虚拟列表和瀑布流布局，通过维护每列的渲染队列和渲染项元数据，动态计算每项的位置。文章允许传入图片宽高以减少计算，并设置缓冲高度提前渲染。实现中需注意，图片加载后需重新计算布局，且滚动触底加载需等待当前数据加载完毕。这种方案适合图片密集的页面，但实现复杂度较高。
Q&A
什么是虚拟列表技术，它的核心思想是什么？
虚拟列表技术是一种根据滚动容器的可视区域动态计算和按需渲染长列表数据的技术，旨在解决大量DOM元素导致的性能问题。
虚拟列表分为哪几种类型？
虚拟列表分为定高和不定高两种类型，定高的每个DOM元素高度确定，不定高的每个DOM元素高度不确定。
如何使用原生JS创建虚拟列表？
使用原生JS创建虚拟列表时，需要计算可视区域高度、渲染项数，并绑定滚动事件以动态更新内容。
在虚拟列表中如何处理滚动事件？
在虚拟列表中，通过绑定滚动事件，计算起始索引，并在滚动时渲染最新的DOM元素。
虚拟列表如何提升页面性能？
虚拟列表通过动态计算和按需渲染，减少了需要渲染的DOM元素数量，从而提升页面性能，避免卡顿和白屏现象。
在实现虚拟列表时，如何计算渲染的列表数据？
通过计算开始和结束索引，确定实际渲染的列表数据，并更新滚动样式。
