Angular Edge 和 Firefox 中的应用冻结

Question

我最近一直在开发 angular 应用程序。除了 Edge 和 Firefox 之外，它在我能在移动设备和 PC 上找到的所有浏览器中都运行良好。 Edge 和 Firefox 都冻结，没有任何输出到控制台。一段时间后，Firefox 告诉我页面已冻结，并为我提供了终止脚本的选项。然后将以下内容打印到控制台：

Error: Script terminated by timeout at:
__spread@http://localhost:4200/vendor.js:86417:14
debugCheckNoChangesNode@http://localhost:4200/vendor.js:49939:38
debugCheckRenderNodeFn@http://localhost:4200/vendor.js:49893:13
View_HeaderComponent_7/<@ng:///AppModule/HeaderComponent.ngfactory.js:187:5
debugUpdateRenderer@http://localhost:4200/vendor.js:49882:12
checkNoChangesView@http://localhost:4200/vendor.js:49237:5
callViewAction@http://localhost:4200/vendor.js:49474:21
execEmbeddedViewsAction@http://localhost:4200/vendor.js:49457:17
checkNoChangesView@http://localhost:4200/vendor.js:49236:5
callViewAction@http://localhost:4200/vendor.js:49474:21
execComponentViewsAction@http://localhost:4200/vendor.js:49436:13
checkNoChangesView@http://localhost:4200/vendor.js:49238:5
callViewAction@http://localhost:4200/vendor.js:49474:21
execComponentViewsAction@http://localhost:4200/vendor.js:49436:13
checkNoChangesView@http://localhost:4200/vendor.js:49238:5
callWithDebugContext@http://localhost:4200/vendor.js:50146:22
debugCheckNoChangesView@http://localhost:4200/vendor.js:49827:12
./node_modules/@angular/core/fesm5/core.js/ViewRef_.prototype.checkNoChanges@http://localhost:4200/vendor.js:47648:55
./node_modules/@angular/core/fesm5/core.js/ApplicationRef.prototype.tick/<@http://localhost:4200/vendor.js:43378:62
./node_modules/@angular/core/fesm5/core.js/ApplicationRef.prototype.tick@http://localhost:4200/vendor.js:43378:17
next/<@http://localhost:4200/vendor.js:43268:99
./node_modules/zone.js/dist/zone.js/</ZoneDelegate.prototype.invoke@http://localhost:4200/polyfills.js:7433:17
onInvoke@http://localhost:4200/vendor.js:42619:24
./node_modules/zone.js/dist/zone.js/</ZoneDelegate.prototype.invoke@http://localhost:4200/polyfills.js:7432:17
./node_modules/zone.js/dist/zone.js/</Zone.prototype.run@http://localhost:4200/polyfills.js:7183:24
./node_modules/@angular/core/fesm5/core.js/NgZone.prototype.run@http://localhost:4200/vendor.js:42533:16
next@http://localhost:4200/vendor.js:43268:69
./node_modules/@angular/core/fesm5/core.js/EventEmitter.prototype.subscribe/schedulerFn<@http://localhost:4200/vendor.js:42350:36
./node_modules/rxjs/_esm5/internal/Subscriber.js/SafeSubscriber.prototype.__tryOrUnsub@http://localhost:4200/vendor.js:69383:13
./node_modules/rxjs/_esm5/internal/Subscriber.js/SafeSubscriber.prototype.next@http://localhost:4200/vendor.js:69321:17
./node_modules/rxjs/_esm5/internal/Subscriber.js/Subscriber.prototype._next@http://localhost:4200/vendor.js:69254:9
./node_modules/rxjs/_esm5/internal/Subscriber.js/Subscriber.prototype.next@http://localhost:4200/vendor.js:69229:13
./node_modules/rxjs/_esm5/internal/Subject.js/Subject.prototype.next@http://localhost:4200/vendor.js:68994:17
./node_modules/@angular/core/fesm5/core.js/EventEmitter.prototype.emit@http://localhost:4200/vendor.js:42334:54
checkStable@http://localhost:4200/vendor.js:42588:13
onLeave@http://localhost:4200/vendor.js:42655:5
onInvoke@http://localhost:4200/vendor.js:42622:17
./node_modules/zone.js/dist/zone.js/</ZoneDelegate.prototype.invoke@http://localhost:4200/polyfills.js:7432:17
./node_modules/zone.js/dist/zone.js/</Zone.prototype.runGuarded@http://localhost:4200/polyfills.js:7196:28
./node_modules/zone.js/dist/zone.js/</Zone.prototype.wrap/<@http://localhost:4200/polyfills.js:7174:24

我已经包含了所有的 polyfill。

重点是它适用于所有浏览器，包括 IE，但不适用于 Firefox 和 Edge。这让我想知道出了什么问题。该应用程序非常大，所以包括它或剥离它不是一种选择。

有什么想法吗？

Answer 1

经过大量调试，我终于找到了冻结的原因。我使用的是 MutationObserver api 结果是冻结的原因。

Angular Edge 和 Firefox 中的应用冻结

Angular App freezing in both Edge and Firefox

firefox

rxjs

microsoft-edge

zone.js

angular