1

原文:Complexities of an Infinite Scroller

实现的代码示例

无限滚动使用场景很多,有些难点需要注意。比如页脚中的链接无法访问,因为内容不断地将页脚推开;手机从纵向转向横向,您如何处理调整大小事件?或者,当列表过长时,您如何防止页面卡顿。

We are going to use 3 techniques to achieve our goal: DOM recycling, tombstones and scroll anchoring.
我们将使用3种技术来实现我们的目标:DOM回收、墓碑和滚动锚定。

DOM recycling
原文中,一张svg动图,很形象展示了dom回收利用的原理。
视口内的dom数量是固定可计算的。所以滚动时,视口上边界被删除dom,可以复用为视口下边界即将要展示的dom。
然而dom的删除新增,还是会消耗性能。文中给出更好的实现方案。

position:absolute;
使用css模拟dom的删除新增。
还有,css contain的视口容器性能优化

文中还有一段根据列表总数计算高度,实现滚动条真实反映数据长度。

Intersection Observer API,也有提及,高延迟的问题。
最后介绍了 Houdini’s Compositor Worklet
(知乎译文)

Tombstones墓碑,其实就是占位符。
占位dom元素有真实元素内容大小,高度不一致问题。

需要引入Scroll anchoring,锚点用来记录元素的滚动距离以及距离视口边界的偏移值。
滚动锚定将在替换墓碑以及调整窗口大小时调用


肥皂泡
382 声望6 粉丝

码农