十万条数据，如何渲染
2023-02-17 本文已影响0人
Allan要做活神仙
简单DOM
核心：时间分片（分片 append 进 html）
1、setTimeout -> 会有白屏（因为执行时间不确定）
2、【最优解】requestAnimationFrame -> 没有白屏（屏幕刷新一下，CB执行一下）
3、【进阶】requestAnimationFrame + DocumentFrament（不是真实Dom树，不会触发重新渲染，存在于内存中）
image.png
复杂DOM
股票等
核心：虚拟列表，首屏加载 可视区域 的列表项
滚动时，根据垂直偏移，不断修复可视区域列表开始/结束索引来动态展示列表。
image.png
referce：https://juejin.cn/post/6844903982742110216#heading-1
