javascript - 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)更好地理解 Angular 变化检测，我发现我的问题是:

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

我通过以下方式修复了此性能问题:

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

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