Angular 中虚拟列表的性能优化

Question

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

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

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

我研究了很多关于虚拟列表的教程，其中 none 指出了一些解决内存使用问题的解决方案。

Answer 1

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

使用 zone.js 你可以模拟多线程之类的东西，并将你的计算放到 "second" javascript 进程中。

在您的组件中注入 NgZone：

constructor(private readonly zone: NgZone) { }

然后你可以运行你在"second"过程中的计算是这样的：

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

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

Angular 中虚拟列表的性能优化

Performance optimizations for virtual lists in Angular

javascript

angular

performance

list

virtual