滚动优化(无限滚动加载、滚动元素内有大量dom,造成卡顿问题的优化方案)

4,548 阅读1分钟

解决滚动元素内有大量dom,造成卡顿问题的方案

实现的dome效果在线查看

代码git地址

下面这几种滚动场景,都有可能造成卡顿:

  • 滚动加载,出现无限滚动时,可能给dom过多页面卡死
  • 滚动加载的组件,dom过多,销毁组件的时候也会出现卡死
  • 任何滚动的元素,内部元素过多,都会出现卡顿现象

针对上面的问题,我们能否有什么优化的方案?

任何滚动的dom元素中只展示 可视区域展示 的功能。如下图:

  • 外元素滚动时,在非可视区域的dom,都暂时转存到内存的文档碎片中
  • 为了防止抖动,用一个空的节点占位,因为是空节点,没什么层级关系,造成卡顿的问题明显降低

具体实现可以代码git地址,代码里注释比较清晰了

此处输入图片的描述

实现后的效果如下图,非可是区域,只有一个空的dom占位: 实现的dome效果在线查看

此处输入图片的描述