Performance Angular2大列表滚动性能

我有一个Angular4应用程序，有一个无尽的列表，使用的是

ngx无限滚动：0.5.1

。我还在网站的每个部分使用延迟加载

当我第一次进入带有大型无限滚动列表的部分时，性能非常好，滚动事件非常响应，感觉一切都很顺利。然后我可以滚动到列表的末尾（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);
}

addToTileListData（tileDataList:any）{
//生成临时列表
让我们来看看数据列表：List=List（）；
对于（让tileData成为TileDalitist.body的tileData）{
const tile:PxTile=作为PxTile的tileData；
试探性数据列表=试探性数据列表.set（试探性数据列表.size，平铺）；
}
//将临时列表与可见数据合并
const newList=this.tileList.concat（诱惑数据列表）；
此.setTileList（新列表）；
}

使用

ChangeDetectionStrategy.OnPush

当我离开该部分并进入另一个延迟加载部分时，上一个具有大列表的部分将被销毁

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

你有什么建议吗？问题可能是什么？或者我应该如何继续？这个问题听起来像是内存泄漏吗

如果我查看Chrome developer工具的performance选项卡，我可以同时看到，多个scoll事件堆叠在彼此的顶部：

---

非常感谢你的帮助

您可以尝试为您知道不会更改的组件分离更改检测器。注入ChangeDetectorRef并调用detach。如果你知道它需要更新，你可以重新附加它。我已经分离了ChangeDetectorRef，列表在该模块的第一次延迟加载时似乎表现得更平滑，但是当我切换到其他延迟加载的模块时（同时列表被销毁），然后用列表更改回延迟加载的模块（重新加载），然后列表仍然会表现得非常缓慢，我向下滚动的次数越多，加载并附加到列表底部的新数据就越多。你知道我能做什么吗？试着启用生产模式。也许Angular的额外调试检查会减慢速度。它确实有帮助。非常感谢！我还在api调用前面添加了.first（），这也加快了调用速度：）