万张图片，流畅体验——记一次 Vue 列表渲染

简介： ### 背景 团队目前的Web端产品中需要显示两个列表视图：卡片列表和条目列表，并且在点击切换按钮的时候，对两个列表进行切换显示。 ![条目列表](https://ata2-img.oss-cn-zh
背景
团队目前的Web端产品中需要显示两个列表视图：卡片列表和条目列表，并且在点击切换按钮的时候，对两个列表进行切换显示。

在开发完成进行简单性能测试时，发现列表数量达到数百条后，切换视图就会造成明显的页面卡顿，用户体验很差。于是着手进行性能优化。

第一次优化：解决已知问题
由于项目是使用 Vue.js （以下简称 “Vue”）来实现，所以首先查看 Vue 是否存在性能瓶颈，如果存在则考虑替换 Vue 进行优化。

通过查看官方给出的benchmark结果，我们可以得知 Vue 的列表渲染性能在高亮和交换列表元素的时候新能较差，在创建列表和新增列表元素的时候性能都是不错的，执行时间在毫秒级别。

既然 Vue 并没有给我们制定太低的性能天花板，那么我们可以在使用 Vue 的基础上继续进行性能优化。

再来看看代码，点击切换的时候到底发生了什么。

点击事件触发后会引起组件属性 cViewType 变化，然后两个视图的列表会根据 cViewType 的值进行渲染。部分代码如下：

......

......

这里通过 v-if 指令来实现列