Angular中虚拟列表的性能优化

Question

我正在用Angular构建一个虚拟列表，虽然我已经实现了大多数东西(只显示基于滚动位置的必要项目，保持滚动位置的准确性等)，但还有一件事我还想解决。

随着JavaScript对象数量的增长，页面开始变得有点滞后。将项保存在JavaScript数组中对于渲染它们和计算位置等至关重要。什么是减轻浏览器主线程内存负载的最佳策略？我们可以通过将JavaScript对象移到Web Workers来减少浏览器主线程的内存使用量吗?这样，当我们需要项目时，我们就可以向它们发出请求。这种方法的实际限制是什么？

我们还可以使用其他解决方案吗？

我看过很多关于虚拟列表的教程，但没有一个能解决内存使用的问题。

Answer 1

为了提高性能，您可以使用requestAnimationFrame和zone.js。

使用zone.js，你可以模拟类似多线程的东西，把你的计算放到“第二个”javascript进程中。

在您的组件中注入NgZone：

constructor(private readonly zone: NgZone) { }

然后你可以在"second“进程中运行计算，如下所示：

this.zone.runOutsideAngular(() => {
      requestAnimationFrame(() => this.calculateFunction());
});

Here是一个非常好的angular虚拟卷轴dom的实现。试一试，或者看看源代码。