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
,以便该组件中的事件仅触发对该组件而不是整个文档的更改检测
现在,这些事件处理程序花费的时间少了很多,而且页面感觉又响应了