标签
note
字数
561 字
阅读时间
3 分钟
- 采用懒加载 + 分页 (前端维护懒加载的数据分发和分页)
- 使用虚拟滚动技术 (目前 react 的 antd4.0 已支持虚拟滚动的 select 长列表)
懒加载
将数据分堆分批次
判断滚动到达底部进行下次渲染
scrollTop + clientHeight >= innerHeightnew MutationObserver()去观测
使用 setTimeout 进行分批次渲染
可以使用 requestAnimationFrame 优化
虚拟滚动
也叫虚拟列表
优化
setTimeout 的闪屏现象
setTimeout的执行时间并不是确定的。在 JS 中，setTimeout任务被放进事件队列中，只有主线程执行完才会去检查事件队列中的任务是否需要执行，因此setTimeout的实际执行时间可能会比其设定的时间晚一些。- 刷新频率受屏幕分辨率和屏幕尺寸的影响，因此不同设备的刷新频率可能会不同，而
setTimeout只能设置一个固定时间间隔，这个时间不一定和屏幕的刷新时间相同。
以上两种情况都会导致 setTimeout 的执行步调和屏幕的刷新步调不一致。
在 setTimeout 中对 dom 进行操作，必须要等到屏幕下次绘制时才能更新到屏幕上，如果两者步调不一致，就可能导致中间某一帧的操作被跨越过去，而直接更新下一帧的元素，从而导致丢帧现象
利用 web worker
通过web worker来将需要在前端进行大量计算的逻辑移入进去, 保证 js 主进程的快速响应, 让web worker线程在后台计算
计算完成后再通过web worker的通信机制来通知主进程, 比如模糊搜索等
利用 DocumentFragment
渲染区域使用 ducumentFragment 进行元素替代渲染
参考
什么？后端要一次性返回我10万条数据！且看我这8种方案机智应对！ - 掘金
贡献者
jiechen