Vue2高级-第七篇：Vue2性能优化之渲染优化

Vue2高级-第七篇：Vue2性能优化之渲染优化

在Vue2项目开发中，渲染性能直接影响用户体验。随着应用功能不断丰富、数据量逐渐增大，渲染优化成为提升应用性能的关键环节。接下来，我们将深入探讨在Vue2中减少重绘重排的技巧以及虚拟列表与无限滚动的实现，以此提升应用的渲染效率。

减少重绘重排的技巧

理解重绘和重排

重排（reflow）是当DOM的变化影响了元素的几何属性（例如改变元素的宽度、高度、位置等）时，浏览器需要重新计算元素的几何属性，并重新构建渲染树的过程。重排操作开销较大，因为它会影响到页面布局。

重绘（repaint）是当元素的外观发生改变（例如改变元素的颜色、背景色等，但不影响其几何属性）时，浏览器需要重新绘制元素的过程。重绘的开销比重排小，但频繁重绘也会影响性能。

批量修改DOM

避免频繁地直接操作DOM，因为每次操作DOM都可能触发重排或重绘。例如，假设我们要对一个元素进行多次样式修改：

// 不好的做法
const el = document.