Angular 事件处理程序很多的应用程序，事件似乎有很大的开销？
Angular App with many event handlers, events seem to have large overhead?
我正在使用 Angular5 创建一个网站，它本质上是一个用于创建一种文档的 GUI。
我正在使用 SVG 绘制文档，文档结构的性质意味着我最终会得到很多元素，在一个大文档中，页面上可能有 ~20,000 DOM 个元素（主要是 SVG）。许多 SVG 元素都有事件处理程序，例如 mousedown、mouseenter、click。可能总共有几千个事件处理程序。
并非完全出乎意料，大型文档的性能越来越差，我正在努力改进它。我一直在使用 chrome 性能监视器试图找出原因，似乎是事件处理程序负责。我可以看到对于几乎每个被触发的事件处理程序，时间至少为 ~70 毫秒。例如，这只是在将鼠标悬停在文档的某个区域上时：
这些事件处理程序调用的实际代码基本上什么都不做（它被一个错误的 if 语句包围），当通过 console.time 计时时，我可以看到它需要 <1 毫秒。
那么什么占用了 70 多毫秒，我能做些什么吗？
当文档很小时，这些相同的事件只需要大约 8 毫秒，但似乎事件处理程序越多，它们就越慢？
由于提供了 link ShellNinja (https://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html)，我对 angular 变化检测有了更好的理解，我发现我的问题是：
- Angular 运行 每次触发事件时更改检测
- 由于我的 document/model 文件很大，这些事件中的每一个都花费了大量时间并使页面显得滞后
我通过以下方式解决了这个性能问题：
- 将我的文档拆分成更小的部分（以前整个文档是 1 个部分，现在是 ~50 个更小的部分）
- 将这些组件的更改检测策略设置为
ChangeDetectionStrategy.OnPush，以便该组件中的事件仅触发对该组件而不是整个文档的更改检测
现在，这些事件处理程序花费的时间少了很多，而且页面感觉又响应了
我正在使用 Angular5 创建一个网站，它本质上是一个用于创建一种文档的 GUI。
我正在使用 SVG 绘制文档，文档结构的性质意味着我最终会得到很多元素，在一个大文档中，页面上可能有 ~20,000 DOM 个元素（主要是 SVG）。许多 SVG 元素都有事件处理程序，例如 mousedown、mouseenter、click。可能总共有几千个事件处理程序。
并非完全出乎意料，大型文档的性能越来越差，我正在努力改进它。我一直在使用 chrome 性能监视器试图找出原因，似乎是事件处理程序负责。我可以看到对于几乎每个被触发的事件处理程序，时间至少为 ~70 毫秒。例如，这只是在将鼠标悬停在文档的某个区域上时：
这些事件处理程序调用的实际代码基本上什么都不做（它被一个错误的 if 语句包围），当通过 console.time 计时时，我可以看到它需要 <1 毫秒。
那么什么占用了 70 多毫秒，我能做些什么吗？
当文档很小时，这些相同的事件只需要大约 8 毫秒，但似乎事件处理程序越多，它们就越慢？
由于提供了 link ShellNinja (https://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html)，我对 angular 变化检测有了更好的理解，我发现我的问题是：
- Angular 运行 每次触发事件时更改检测
- 由于我的 document/model 文件很大，这些事件中的每一个都花费了大量时间并使页面显得滞后
我通过以下方式解决了这个性能问题：
- 将我的文档拆分成更小的部分（以前整个文档是 1 个部分，现在是 ~50 个更小的部分）
- 将这些组件的更改检测策略设置为
ChangeDetectionStrategy.OnPush，以便该组件中的事件仅触发对该组件而不是整个文档的更改检测
现在，这些事件处理程序花费的时间少了很多，而且页面感觉又响应了