html - Chrome浏览器中的角度多行网格性能

我需要制作一个包含大量行的表格的组件。一切都适用于小数据。但是，如果项目数量增长到 2000 甚至更多，它就会变得滞后。滚动，尤其是动画变得太慢了。

我也尝试为ngFor设置trackBy函数，但在这种情况下它对性能没有影响。

请参阅stackblitz示例；

正如您所看到的，当您使用 100 个项目时，所有的工作都完美无缺，在 2000 时它会冻结，而在 10,000 时它无法使用。

我想知道在 Angular 中显示包含大量数据的网格的正确方法是什么，以及如何提高此类页面的性能？

是否有一些延迟加载实现的示例，我可以通过一种方式做到这一点，即只有可见行在 DOM 中作为 html 存在，并且除了滚动之外的所有行都从 DOM 中删除？

任何想法将不胜感激。

更新

我有最新版本的 Chrome 浏览器：版本 66.0.3359.181（官方构建）（64 位）。

我已经尝试过不同的 PC、浏览器：它仅在 chrome 中冻结（例如，在 mac 书上的 chrome 中，它比在 PC 上的效果要好得多，但比在 safari 中更差）。

标签： htmlangularperformancetypescriptgoogle-chrome