DOM回收
DOM回收目的是让DOM的节点数保持在较低的数值。
概括来说，它的机制是利用那些离开视图区域的、已经创建的DOM元素，而不是新建DOM元素。
需要承认的一点是DOM节点本身并非耗能大户，但是也不是一点都不消耗性能，每一个节点都会增加一些额外的内存、布局、样式和绘制。如果一个站点的DOM节点过多，在低端设备上会发现明显的变慢，如果没有彻底卡死的话。
同样需要注意的一点是，在一个较大的DOM中每一次重新布局或重新应用样式（在节点上增加或删除样式所触发的过程）的系统开销都会比较昂贵。所以进行DOM回收意味着我们会保持DOM节点在一个比较低的数量上，进而加快上面提到的这些处理过程。
滚动锚点
我们必须要知道在viewport中的最顶部可见元素是什么。由于这个元素可能只是部分可见的，所以我们也需要存储从顶部元素到viewport顶部的偏移量。
布局
每次DOM元素的回收通常情况下都会引发整个列表的重新布局，这会直接影响我们的性能：无法达成每秒60帧的目标。为避免这一点，我们自己承担了布局的重任，使用了绝对定位的元素。这样我们可以让所有列表中的元素感觉上还在占用空间，但其实那里毛都没有。由于我们自己在操控布局，我们便可以缓存每个元素消失前的位置，在用户往回滚动时，我们能立刻从缓存中加载正确的元素。
理想情况下，条目应该只被重绘一次，那就是当它们被加到DOM时。而且应该对于列表中其它条目的增加或删除完全不受影响。这个是可能的，但是只限于现代浏览器。
极致优化
Chrome增加了CSS Containment的支持，这个特性允许开发者告诉浏览器某个元素是布局和绘制的边界。由于我们这里采用的是自己来布局，这是一个很好的可以应用 containment 的机会。当我们增加一个元素到 runaway时，我们知道其它条目不应该被这个重新布局影响。所以每个条目应该设置一个 contain: layout。我们同样也不希望影响站点的其它部分，所以列表本身也需要这样设置。
网友评论