混合AngularJS和Safari中的Angular应用程序中的性能降低 [英] Slow performance in hybrid AngularJS and Angular application in Safari

问题描述

我最近已经开始使用升级模块将AngularJS应用程序迁移到Angular 4.

I have started recently the migration of an AngularJS application to Angular 4 using the upgrade module.

我的AngularJS指令之一使用第三方库( ngFlow )使用以下文件上传文件XMLHttpRequest.send().在混合模式下运行时，在Chrome和Firefox中上传均可以正常工作.但是，在Safari中，该应用在上传过程中变得非常慢，并且浏览器进程使用的CPU达到了100％.

One of my AngularJS directives uses a third party library (ngFlow) to upload files using XMLHttpRequest.send(). When running in hybrid mode, uploads work fine both, in Chrome and in Firefox. However, in Safari the app becomes very slow during an upload and the browser process reaches 100% CPU used.

使用Safari Web工具，我发现有很多来自zone.js的globalZoneAwareCallback调用.

Using Safari web tools, I see that there is a lot of calls to globalZoneAwareCallback from zone.js.

我的印象是，在上传期间发生的每个XMLHttpRequest进度事件中，"Angular"区域都将启动更改检测.

My impression is that the Angular zone is kicking off change detection for every XMLHttpRequest progress event happening during the upload.

我知道我可以使用NgZone中的runOutsideAngular来避免这种情况，但是在第三方AngularJS库中发生异步调用或是否存在异步调用的情况下，我不知道如何使用它任何其他解决此问题的方法.

I am aware that I could use runOutsideAngular from NgZone to avoid this, but I don't know how to use it in the case where the async call is happening in a third party AngularJS library or if there is any other solution to address this issue.

推荐答案

最后，我设法使用runOutsideAngular解决了该问题.

Finally I managed to resolve the issue using runOutsideAngular.

首先，我将NgZone模块降级以在AngularJS代码中使用它:

First, I downgraded the NgZone module to use it in my AngularJS code:

factory('ngZone', downgradeInjectable(NgZone));

然后我将服务注入了upload指令，并使用它来运行Angular区域之外的文件上传:

And then I injected the service in the upload directive and use it to run the file uploads out of the Angular zone:

ngZone.runOutsideAngular(() => $flow.upload());

这篇关于混合AngularJS和Safari中的Angular应用程序中的性能降低的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！