0

启用角度选项后ngZoneRunCoalescing，当不可见时，所有更改检测都将停止，因为NGZONE选项shouldCoalesceRunChangeDetection依赖于requestAnimationFrame触发下一个更改检测。

...当在后台选项卡或隐藏 iframe 中运行时，大多数浏览器中的 requestAnimationFrame() 调用都会暂停...

Window.requestAnimationFrame

因此，依赖更改检测来开始或完成工作的组件将被阻止，直到页面变得可见。在这种情况下，尝试在单独的窗口/选项卡中打开加载时间较长的 Angular 应用程序以使其在后台加载的用户将不会在加载过程中取得任何进展。如果您右键单击并在新选项卡中打开，直到启用引导选项后该选项卡变得可见，任何具有依赖更改检测才能继续的可视化组件的 Angular 应用程序都不会加载：

platformBrowserDynamic()
  .bootstrapModule(AppModule, {
    ngZoneRunCoalescing: true
  })

这是一个显示问题的最小应用程序运行 SimpleApp - SimpleApp 源。如果您在新选项卡中打开此选项卡，则在选项卡可见之前不会开始计数，但如果您关闭ngZoneRunCoalescing并在新选项卡中打开，如果您将选项卡隐藏足够长的时间，则计数会开始并一直持续到最后。

  • 是否有一种方法可以在隐藏选项卡时保持动画帧在浏览器上运行？
  • 或定期手动触发动画帧？
  • 或在ngZoneRunCoalescing选项卡隐藏时更新选项？
  • 或任何其他想法？

就我而言，我正在开发一个应用程序，该应用程序从可能较慢的外部连接读取数据，然后创建一堆组件，每个组件进一步处理和可视化接收到的数据，可能会创建更多组件。这些组件依赖 Angular 生命周期来接收输入绑定并通过服务进行多次更新，有时还依赖其他组件的输出来进一步处理数据，然后才能渲染。这一切都被阻止，直到选项卡变得可见。

如果没有ngZoneRunCoalescing，用户可以在单独的选项卡中打开应用程序，并允许它在执行其他工作时在后台加载，但是打开此选项后，应用程序会坐在那里并且在选项卡变得可见之前不会开始加载。

我真的很想使用这个选项，因为我看到它打开后加载性能提高了 10-30%（只要页面在整个加载过程中可见）

4

0 回答 0