【无标题】Vue长列表性能优化常用方案

长列表性能问题发生的原因？

众所周知HTML页面中DOM的修改会引起页面的重新渲染，重新渲染包含DOM节点的重排和重绘（重排和重绘的知识点可以自行百度），如果页面中大量的DOM节点发生重绘，页面就会出现性能问题。

如何解决出现的性能问题？

1，最常见的方式是分页加载，切片分段加载。

分页加载大家都知道，不再赘述。下面我们看看切片分段加载。

实现原理：requestAnimationFrame + ceateDocumentFragment

假如有10000条数据要渲染展示，我们用代码实现如下：

const total = 10000;
const container = document.querySelector('.container')
let index = 0;
function render() {
    if (index >= total) return;
    index += 50;
    const fragment = document.createDocumentFragment();
    for (let i = 0; i < 50; i++) {
        const li = document.createElement('li')
        li.innerHTML = i;
        fragment.appendChild(li)
    }
    container.appendChild(fragment)
    window.requestAnimationFrame(render)
}
render()

2，按需加载，只渲染可视区域内的DOM节点

实现原理：根据页面滚动高度和列表高度,计算出可视区域数据，推荐现成插件vue-virtual-scroller。

3，对于纯展示型的数据，如果不需要响应式变化，可以响应式数据变成普通数据，通过Object.freeze方法。

总结：

方法1中的切片分段加载，如果用户滑动较快，会出现白屏现象；

对于渲染和计算都耗时的场景，可以使用方法2，按需加载按需渲染。

对于渲染不耗的场景，可以使用方法3；