大量数据放到select,并支持搜索
解决方式思路:
1、懒加载+分页:由前端完成分页
长列表优化,每次只加载能看见的数据,滚动到底部的时候再加载下一页的
2、虚拟滚动技术:react的antd4.0已支持select长列表
每次只渲染可视化区域,档滚动后动态追加元素并通过顶部padding来撑起整个滚动内容
下策 - 直接把数据怼进去渲染出来
数据一次性渲染到页面中,数据量庞大导致页面性能低下,卡的一笔
中策 - 防抖&节流,懒加载分页处理
通过监听窗口的滚动,当一个站位元素显示出来就去加载下一个数据
这里我们通过监听window的scroll事件以及对poll元素使用getBoundingClientRect来获取poll元素相对于可视窗口的距离, 从而自己实现一个懒加载方案.
注意用户回滚,所以要写一个单向锁
上策 - 使用js缓冲器来分片处理
setTimeout 批量处理