Question

am使用第3方库在Angular（第5版）中生成PPT，第3方库具有许多异步调用和Promise，因此zone.js跟踪运行情况超过50个循环，这降低了应用程序的性能

为了增强这一点，对于该特定功能，我不想运行“ Zone.js”。

如何实现这一目标，任何人都可以提出建议/想法来实施这一繁忙的目标。

'index.ts'文件

platformBrowserDynamic().bootstrapModule(AppModule, {
  ngZone: 'noop'
});

这会禁用整个应用程序，我需要针对特定功能实现相同的功能。

Answer 1

您可以做的是将第三方包装在NgZone.runOutsideAngular(fn)中。

constructor(private zone: NgZone) {}

mouseDown(event) {
  this.element = event.target;

  this.zone.runOutsideAngular(() => {
    window.document.addEventListener('mousemove', this.mouseMove.bind(this));
  });
}

但是我最近尝试用three.js做到这一点，但是效果不佳。

因此，另一种选择是告诉zone.js不跟踪某些事件。

您需要做的是在src文件夹中创建一个名为ngzone-flags.ts的新文件（名称无关紧要），然后将其导入polyfills.ts文件的顶部。

您不能直接在polyfills.ts中使用代码，因为webpack会将所有导入内容放在文件的顶部，这会使zone.js导入位于配置之前。

在ngzone-flags.ts文件中，您应该具有以下内容：

(window as any).__Zone_disable_requestAnimationFrame = true;
(window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove', 'touchmove'];

这将告诉zone.js不要钩住这些事件。

要检查它是否有效，可以使用chrome中的性能面板并运行一段时间，然后检查每个请求动画帧的调用堆栈。在那里不应调用zone.js。

更新

您可以添加更多配置变量。您可以在此处找到完整列表： https://github.com/angular/zone.js/blob/master/MODULE.md

是否可以将'ngZone：'noop''用于特定功能/组件中的角度？

1 个答案:

更新