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