大量用户交互后的输入栏延迟

Question

我已经尝试调试这个问题了一段时间了，但似乎我没有意义。

我有一个Angular网上商店。当前，在产品概述页面上，我们加载一个产品组件，其中包含一个延迟加载的非常压缩的图像。标题，金额输入，尺寸输入和购买按钮。

此组件在页面上呈现100次（每个页面有100个产品项。我们目前正在考虑降低此值，但这似乎无助于解决此问题）

每当用户在购物车中添加了大约10个以上的商品时（在我们的案例中这种情况发生的频率更高），过滤器侧栏中的搜索输入就会严重滞后/延迟。

这仅在我们与产品组件交互时发生。我的第一个猜测是它与changeDetection有关。

我意识到这是很少的信息。我试图在一个孤立的stackblitz环境中重现此问题，但似乎无法使其在那里发生。

因此，我当然希望真正的答案不是真正的答案，而是希望我朝那个方向指出。

非常感谢

Answer 1

让我们从这里开始：

1. 默认使用OnPush策略
2. 将输入元素和列表组件分隔为不同的组件。
3. 请勿在模板中使用性能高的功能。在ts文件中完成。
4. 请勿使用任何filtering管道。
5. 您可以使用纯管道来提高性能，因为它们可以缓存结果。
6. 在输入中使用debounceTime和distinctUntilChanged。
7. 在TrackBy指令上使用ngFor函数。
8. 请确保在合理的地方使用runOutsideAngular。
9. 请确保您没有不必要的DOM操作，这些操作会导致DOM reflow。
10. 将尽可能多的Angular动画移至CSS。
11. 当组件被破坏时，总是取消订阅可观察对象。

待续...