猿问

列表动态显示固定行数和使用虚拟dom,哪一种的性能提高更多?

项目中有一个非常大的列表,数据量达到1000行,而且30秒要更新一次数据,导致页面非常的卡。
最近在使用vue做优化,使用上了鼎鼎大名的虚拟dom,但是现在出来的效果并不是特别的理想。列表在更新时确实会比较快,但是由于dom还是很大,所以其他的操作依旧很慢,特别是重绘时间非常的长。
于是又想到了,利用滚动事件,每次获取固定数量的数据做展示,但是发现因为滚动时一直在做dom更新,加上虚拟dom的对比函数,滚动的效率特别的差。
想问下大家,这两者,到底哪一个的优化性能是比较好的,或者有什么方法能够最大优化经常更新的又很大的列表。


手掌心
浏览 414回答 1
1回答

慕桂英546537

有很多优化的手段比如添加列表时,别一行一行的append,而是将所有列表的html拼接成字符串,然后用innerHTML添加到父容器中。使用vue的话,最好用index作为每个li的key,然后不要直接替换掉整个数据数组,应该去更新数组中的值,这样能保证最大的DOM重用你说的利用滚动事件,没太明白是什么意思,是滚动到底部自动加载新数据吗,这样每次更新的DOM应该非常少,不知道你怎么做的
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答