大数据渲染解决方式

大量数据放到select,并支持搜索

解决方式思路:

1、懒加载+分页:由前端完成分页

长列表优化,每次只加载能看见的数据,滚动到底部的时候再加载下一页的

2、虚拟滚动技术:react的antd4.0已支持select长列表

每次只渲染可视化区域,档滚动后动态追加元素并通过顶部padding来撑起整个滚动内容

下策 - 直接把数据怼进去渲染出来

数据一次性渲染到页面中,数据量庞大导致页面性能低下,卡的一笔

中策 - 防抖&节流,懒加载分页处理

通过监听窗口的滚动,当一个站位元素显示出来就去加载下一个数据

这里我们通过监听windowscroll事件以及对poll元素使用getBoundingClientRect来获取poll元素相对于可视窗口的距离, 从而自己实现一个懒加载方案.

注意用户回滚,所以要写一个单向锁

上策 - 使用js缓冲器来分片处理

setTimeout 批量处理

其他 - web worker 计算、算法优化

你可能感兴趣的:(大数据渲染解决方式)