无限滚动列表
原文：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，锚点用来记录元素的滚动距离以及距离视口边界的偏移值。
滚动锚定将在替换墓碑以及调整窗口大小时调用
推荐阅读
- 07/22【晨读感悟】保持好奇心，生活才有无限可能
- 星际无限|星际无限 | 官方推出Filecoin MinerX奖学金计划，吸引中小型Filecoin矿工
- 生活不就是这样吗（一边努力着一边辛苦着，想到为的人还无限幸福着）
- 致无限美好的2019
- 鹊桥仙|鹊桥仙 诗思无限
- HTML5学习之ul|HTML5学习之ul li列表实战
- 坎
- list
- 只想
- python中的列表解析