虚拟列表(10w条数据如何解决加载缓慢)

245 阅读1分钟

应用场景 后台一次性发送10w条数据给前台,在接口不支持分页情况下渲染,保证用户使用不卡顿 问题分析 浏览器需要生成10w个dom节点用来渲染页面,必然会卡顿 解决方案 虚拟列表:浏览器只需要生成少量dom元素(节点取决前端试图需要展示的数量),岁页面滚动 ,不断复用当前屏幕dom元素即可 总结:虚拟列表就是固定的dom节点数量 通过修改dom元素的内容二不增加或删除dom节点实现列表更新

实现原理 监听页面滚动,获取滚动的高度scrollTop 根据scrollTop计算挡球an应该展现哪部分的数据,计算出 startindex和endindex 根据当前战术的数据在长列表的索引,对列表偏移展示

image.png

image.png