项目中有一个非常大的列表，数据量达到1000行，而且30秒要更新一次数据，导致页面非常的卡。最近在使用vue做优化，使用上了鼎鼎大名的虚拟dom，但是现在出来的效果并不是特别的理想。列表在更新时确实会比较快，但是由于dom还是很大，所以其他的操作依旧很慢，特别是重绘时间非常的长。于是又想到了，利用滚动事件，每次获取固定数量的数据做展示，但是发现因为滚动时一直在做dom更新，加上虚拟dom的对比函数，滚动的效率特别的差。想问下大家，这两者，到底哪一个的优化性能是比较好的，或者有什么方法能够最大优化经常更新的又很大的列表。
1 回答
慕桂英546537
TA贡献1848条经验 获得超10个赞
有很多优化的手段
比如添加列表时，别一行一行的append，而是将所有列表的html拼接成字符串，然后用innerHTML添加到父容器中。
使用vue的话，最好用index作为每个li的key，然后不要直接替换掉整个数据数组，应该去更新数组中的值，这样能保证最大的DOM重用
你说的利用滚动事件，没太明白是什么意思，是滚动到底部自动加载新数据吗，这样每次更新的DOM应该非常少，不知道你怎么做的
添加回答
举报
0/150
提交
取消