简介: ### 背景 团队目前的Web端产品中需要显示两个列表视图:卡片列表和条目列表,并且在点击切换按钮的时候,对两个列表进行切换显示。 ![条目列表](https://ata2-img.oss-cn-zh
背景
团队目前的Web端产品中需要显示两个列表视图:卡片列表和条目列表,并且在点击切换按钮的时候,对两个列表进行切换显示。
在开发完成进行简单性能测试时,发现列表数量达到数百条后,切换视图就会造成明显的页面卡顿,用户体验很差。于是着手进行性能优化。
第一次优化:解决已知问题
由于项目是使用 Vue.js (以下简称 “Vue”)来实现,所以首先查看 Vue 是否存在性能瓶颈,如果存在则考虑替换 Vue 进行优化。
通过查看官方给出的benchmark结果,我们可以得知 Vue 的列表渲染性能在高亮和交换列表元素的时候新能较差,在创建列表和新增列表元素的时候性能都是不错的,执行时间在毫秒级别。
既然 Vue 并没有给我们制定太低的性能天花板,那么我们可以在使用 Vue 的基础上继续进行性能优化。
再来看看代码,点击切换的时候到底发生了什么。
点击事件触发后会引起组件属性 cViewType 变化,然后两个视图的列表会根据 cViewType 的值进行渲染。部分代码如下: