javascript - Angular 中虚拟列表的性能优化

Question

我正在 Angular 中构建一个虚拟列表，虽然我已经实现了大部分内容(仅根据滚动位置显示必要的项目、保持准确的滚动位置等)，但我还想修复最后一件事.

随着 JavaScript 对象数量的增加，页面开始有点滞后。将项目保存在 JavaScript 数组中对于渲染它们和计算位置等至关重要。减轻浏览器主线程内存负载的最佳策略是什么？我们能否通过将 JavaScript 对象移至 Web Workers 来减少浏览器主线程的内存使用量，这样无论何时我们需要项目时都可以询问它们。这种方法的实际限制是什么？

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

我研究了很多关于虚拟列表的教程，但没有一个指出解决内存使用问题的解决方案。

Answer 1

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

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

在您的组件中注入(inject) NgZone:

constructor(private readonly zone: NgZone) { }

然后你可以像这样在“第二”过程中运行你的计算:

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

Here是 angular 的虚拟滚动 dom 的一个很好的实现。尝试一下或查看源代码。