【发布时间】：2019-04-03 15:05:02
【问题描述】：
我们有一个 Angular 7 项目，它使用 Angular 元素生成自定义元素。此自定义元素用于 React 项目和 AngularJS 项目。 当自定义元素的代码在其中一个项目中加载时，网站速度会降低大约 30% - 即使自定义元素没有呈现到 DOM 中！
性能分析表明 zone.js 中的方法 invokeTask() 和 runTask() 被非常频繁地调用。
我尝试将https://github.com/angular/zone.js/blob/master/STANDARD-APIS.md 中描述的事件列入黑名单，但这没有效果。
packages.json 中的依赖有：
"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 中呈现，zone.js 也会监听事件？如何让网站再次变得更快？
更新： 我也尝试将 ChangeDetection 设置为 onPush，但问题仍然存在。
【问题讨论】：
-
30% 是一个巨大的性能损失。远远超出仅由区域引起的任何事情。说区域是问题就像抱怨 C++ 中的
main()函数很慢，所以你应该删除它。话虽如此，这里有一个关于如何完全删除区域的教程。也许在你这样做之后，你会更好地了解问题出在哪里。 blog.angularindepth.com/… -
但是为什么即使我的自定义元素根本没有渲染到 dom 中，这些方法也经常被调用？
-
您可以在
zone.jsrepo 中发布问题并使用repo repo。我可以检查一下。
标签： angular zone.js angular-elements