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

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

实现的dome效果在线查看

代码git地址

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

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

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

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

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

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

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

转载于:https://juejin.im/post/5a71c7dc5188253fca37f31b