虚拟滚动实现一次vue长列表的内存性能分析和优化

原理:这种方案的原理是使用一个大容器作为滚动区域,里面有一个内容区域,JS通过数据数量和每条数据的高度计算出内容区的高度,内容区用padding或绝对定位撑开滚动区域,让容器可滚动,另外就是数据项了,滚动的时候,计算当前滚动位置scrollTop,再从数据项中找出各项的高度,从头到尾计算出此时容器中放什么数据。
总结一下,主要的五个优化

  1. 将表格实现改为其他元素标签实现

  2. 仅渲染视窗可见的数据

  3. 进行函数节流

  4. 减少驻留的VNode和Vue组件,不使用显示的子组件slot方式,改为手动创建虚拟DOM来切断对象引用

  5. 减少操作期间增加的对象,操作时组件必然会更新创建,可以减少组件中子组件的数量

记一次vue长列表的内存性能分析和优化

发布了91 篇原创文章 · 获赞 82 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/qq_42893625/article/details/105009812