Angular Elements / Zone.js事件侦听器会减慢主页速度 [英] Angular Elements / Zone.js event listeners slow down homepage
问题描述
我们有一个Angular 7项目,它使用Angular Elements生成一个Custom Element。此自定义元素用于React项目和AngularJS项目中。
在其中一个项目中加载了自定义元素的代码后,即使自定义元素未呈现到DOM中,网站的运行速度也降低了约30%!
We have an Angular 7 project that generates a Custom Element with Angular Elements. This Custom Element is used in a React project and in an AngularJS project. When the code of the Custom Element is loaded in one of these projects, the site is slowed down by around 30% - even if the Custom Element is not rendered into the DOM!
性能分析表明,经常调用zone.js中的方法invokeTask()和runTask()。
Performance analysis shows that the methods invokeTask() and runTask() from zone.js are called very often.
我试图将事件列入黑名单在 https://github.com/angular/中进行了描述zone.js / blob / master / STANDARD-APIS.md ,但这没有效果。
I tried to blacklist the events as it is described in https://github.com/angular/zone.js/blob/master/STANDARD-APIS.md but this had no effect.
packages.json中的依赖项为:
The dependencies in packages.json are:
"dependencies": {
"@angular/animations": "^7.2.7",
"@angular/cdk": "^7.3.3",
"@angular/common": "^7.2.7",
"@angular/compiler": "^7.2.7",
"@angular/core": "^7.2.7",
"@angular/elements": "^7.2.7",
"@angular/forms": "^7.2.7",
"@angular/http": "^7.2.7",
"@angular/material": "^7.3.3",
"@angular/platform-browser": "^7.2.7",
"@angular/platform-browser-dynamic": "^7.2.7",
"@angular/router": "^7.2.7",
"@angular/upgrade": "^7.2.7",
"compass-mixins": "^0.12.10",
"core-js": "^2.5.4",
"dateformat": "^3.0.2",
"devextreme": "^18.2.6",
"devextreme-angular": "^18.2.6",
"devextreme-intl": "^18.2.6",
"in-view": "^0.6.1",
"jquery": "^3.0.0",
"keycode": "^2.1.9",
"lodash": "^4.17.5",
"material-design-icons": "^3.0.1",
"moment": "^2.22.2",
"muuri": "0.5.4",
"ng2-nouislider": "^1.7.13",
"nouislider": "^12.1.0",
"reflect-metadata": "^0.1.12",
"rxjs": "6.4.0",
"rxjs-compat": "^6.0.0-rc.0",
"zone.js": "^0.9.0"
},
所以我的问题是:即使自定义元素未在DOM?
So my question is: why is zone.js listening to events even if the Custom Element is not rendered in the DOM? How is it possible to make the site faster again?
更新:
我还尝试将ChangeDetection设置为onPush,但这是问题所在
Update: I also tried setting ChangeDetection to onPush, but the issue remains.
推荐答案
我会避免接触ZoneJS设置,因为这会严重影响Angular本身。
I would keep out of touching ZoneJS settings, since it would heavily affects Angular itself.
对于组件,我也有类似的经历,每次创建都会变慢,因为存在循环依赖。我的猜测是您的代码中有一些东西,很可能带有依赖关系,会导致生成多个事件。
I had a similar experience with a component that every time was created slowed down because there was a circular dependency. My guess is that there is something in your code, more probably with dependencies, that leads to multiple events generated.
这篇关于Angular Elements / Zone.js事件侦听器会减慢主页速度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!