Question

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

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

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

我已经查看了许多虚拟列表教程，但没有一个指出解决内存使用的解决方案。

Answer 1

对于效果提升，您可以使用requestAnimationFrame和zone.js。

使用zone.js，您可以模拟多线程之类的内容，并将计算结果放到“第二个”javascript进程中。

在您的组件中注入NgZone：

constructor(private readonly zone: NgZone) { }

然后你可以在“第二”过程中运行你的计算：

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

Here是角度虚拟滚动dom的一个非常好的实现。试一试或查看源代码。

Angular中虚拟列表的性能优化

1 个答案: