Angular App 有很多事件处理程序，事件似乎有很大的开销？

Question

我正在使用 Angular 5 创建一个网站，它本质上是一个用于创建文档类型的 GUI。

我使用 SVG 来绘制文档，文档结构的性质意味着我最终会得到很多元素，在大型文档中，页面上可能有大约 20,000 个 DOM 元素（主要是 SVG）。许多 SVG 元素都有事件处理程序，例如mousedown、mouseenter、click。总共可能有几千个事件处理程序。

并不完全出乎意料的是，大型文档的性能变得非常糟糕，我正在努力改进它。我一直在使用 chrome 性能监视器来尝试找出原因，似乎是事件处理程序负责。我可以看到，几乎每个触发的事件处理程序的时间至少约为 70 毫秒。例如，当鼠标悬停在文档的某个区域上时：

这些事件处理程序调用的实际代码基本上没有执行任何操作（它被错误的 if 语句包围），并且当通过 console.time 对其进行计时时，我可以看到它需要 <1ms。

那么到底是什么花费了 70 多毫秒的时间，我能做些什么呢？

当文档很小时，这些相同的事件只需要大约 8 毫秒，但似乎事件处理程序越多，它们就越慢？

Answer 1

通过 ShellNinja 提供的链接（https://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html）更好地理解角度变化检测，我发现我的问题是:

• 每次触发事件时检测角度运行变化
• 由于我的文档/模型很大，每个事件都花费了相当多的时间并使页面显得缓慢

我通过以下方式解决了这个性能问题：

• 将我的文档拆分为较小的组件（以前整个文档是 1 个组件，现在大约有 50 个较小的组件）
• 在这些组件上设置更改检测策略，以便ChangeDetectionStrategy.OnPush该组件中的事件仅触发该组件而不是整个文档的更改检测

现在，这些事件处理程序花费的时间少得多，并且页面再次具有响应能力