Angular2大列表滚动性能

Question

我使用ngx-infinite-scroll:0.5.1创建了一个包含无限列表的Angular4应用。我也在网站的每个部分使用延迟加载。

当我第一次进入带有大型无限滚动列表的部分时，性能非常好，滚动事件非常灵敏，一切都很顺利。然后我可以滚动到列表的末尾（1000个组件项），加载并将更多的块附加到列表中，如下所示：

addToTileListData(tileDataList: any) {

   // Build temp list
   let tempTileDataList: List<PxTile> = List<PxTile>();

   for (let tileData of tileDataList.body) {

     const tile: PxTile = tileData as PxTile;
     tempTileDataList = tempTileDataList.set(tempTileDataList.size, tile);
   }

   // Merge temp list with visible data
   const newList = <List<PxTile>>this.tileList.concat(tempTileDataList);
   this.setTileList(newList);
}

1000个组件是使用ChangeDetectionStrategy.OnPush

的immutable.js项目

当我离开该部分并进入另一个延迟加载部分时，上一部分包含大型列表将被销毁。

但是当我再次导航回到具有大量无限列表的部分时，列表在滚动时很快变得非常缓慢，直到我滚动到1000个项目列表的末尾时，滚动几乎冻结。

您对此问题有什么建议吗？或者我该怎么办？这个问题听起来像是内存泄漏吗？

如果我查看Chrome开发者工具的效果标签，我可以看到同时，scoll事件的混合堆叠在彼此之上：

非常感谢你的帮助！