解决滚动元素内有大量dom,造成卡顿问题的方案
下面这几种滚动场景,都有可能造成卡顿:
- 滚动加载,出现无限滚动时,可能给dom过多页面卡死
- 滚动加载的组件,dom过多,销毁组件的时候也会出现卡死
- 任何滚动的元素,内部元素过多,都会出现卡顿现象
针对上面的问题,我们能否有什么优化的方案?
任何滚动的dom元素中只展示 可视区域展示 的功能。如下图:
- 外元素滚动时,在非可视区域的dom,都暂时转存到内存的文档碎片中
- 为了防止抖动,用一个空的节点占位,因为是空节点,没什么层级关系,造成卡顿的问题明显降低
实现后的效果如下图,非可是区域,只有一个空的dom占位: 实现的dome效果在线查看