如何实现Vue.js无限滚动列表的高效性能优化？

本文共计1683个文字，预计阅读时间需要7分钟。

问题+大家都知道，Web页面修改DOM是开销很大的操作，相比其他操作要慢很多。这是为什么呢？因为每次DOM修改，浏览器都需要重新计算元素布局，再重新渲染。也就是所谓的重排。

问题

大家都知道，Web 页面修改 DOM 是开销较大的操作，相比其他操作要慢很多。这是为什么呢？因为每次 DOM 修改，浏览器往往需要重新计算元素布局，再重新渲染。也就是所谓的重排（reflow）和重绘（repaint）。尤其是在页面包含大量元素和复杂布局的情况下，性能会受到影响。那对用户有什么实际的影响呢？

一个常见的场景是大数据量的列表渲染。通常表现为可无限滚动的无序列表或者表格，当数据很多时，页面会出现明显的滚动卡顿，严重影响了用户体验。怎么解决呢？

解决方案

既然问题的根源是 DOM 元素太多，那就想办法限制元素数量。

• 限制列表对用户可见的元素数量。我们把可见区域称为 ViewPort
• 当列表滚动时，列表种的其他元素怎么由不可见变为可见？
• 监听列表容器元素的滚动事件，当列表里的元素进入可视区域，则添加到DOM中
• 问题是如果一直这么滚下去，列表会越来越大。所以需要在列表元素离开 ViewPort 的时候从DOM中移除
• 问题又来了，由于 ViewPort 刚好是一屏的大小，滚动的时候元素还没来得及渲染，会出现一段时间的空白。解决办法就是上下增加一部分数据渲染。

无限滚动的性能优化方案基本思路就是这样。