13-Vue长列表优化 vue-virtual-scroller

回答：

在大型的企业级项目中经常要渲染大量的数据，这种长列表是一个很普遍的场景，当列表内容越来越多就会导致页面滑动卡顿、白屏、数据渲染较慢的问题；

这种情况主要发生在小程序、移动端或者后台管理的页面当中；

通常我们会采用分页的方式进行内容的逐渐获取，但是当内容越来越多时；

比如移动端的下拉刷新，不停的往上翻，到底部会加载更多内容，这样一来列表中会新增很多的元素，元素多了以后会触发浏览器的重排重绘，无论是内存的占用还是GPU的渲染都会带来很大的性能损耗，导致页面滑动卡顿、数据渲染较慢的问题；

处理时要根据情况做不同处理：

• 避免大数据量：采取分页的方式获取
• 避免渲染大量数据：vue-virtual-scroller 插件等虚拟列表方案，只渲染视口范围内数据
• 避免更新：使用 v-once 方式只渲染一次
• 优化更新：通过 v-memo 缓存子树，有条件更新，提高复用，避免不必要更新
• 按需加载数据：采用懒加载的方式，比如 tree 组件子树的懒加载

总之，还是要看具体需求，首先从设计上避免大数据获取和渲染；实在需要这样做可以采用虚拟列表的方式优化渲染数量；最后优化更新，如果不需要更新可以 v-once 避免更新，需要更新可以 v-memo 进一步优化大数据更新性能，其他可以采用的是交互方式优化，无限滚动，懒加载方案等。

页面卡顿的原因

根源：大量DOM元素的 reflow 和 repaint

修改是对当前DOM元素的修改，更新却是所有的DOM都更新

优化思路：

1、懒渲染

• 懒加载，常见的长列表优化方案，常见于移动端
• 原理：每次只渲染一部分，等渲染的数据即将滚动完时，再渲染下面部分
• 优点：每次渲染一部分数据，速度快
• 缺点：数据量大时，页面中依然存在大量DOM节点，占用内存过多，降低浏览器渲染性能，导致页面卡顿
• 使用场景：数据量不大的情况下（比如1000条