Angular.js: Angular JS application is slow on IE 11
_Note_: for support questions, please use one of these channels: https://github.com/angular/angular.js/blob/master/CONTRIBUTING.md#question. This repository's issues are reserved for feature requests and bug reports.
Do you want to request a _feature_ or report a _bug_?
We are not sure about the request category as of now. You can decide the appropriate request category after analyzing the issue details.
What is the current behavior?
We have made AngularJS application on Salesforce platform. AngularJS application is too much clow on IE 11 compare to Google Chrome browser.
We reached out to Microsoft Support Team for this issue and following is the analysis.
• Microsoft Support Team has found that IE 11 is taking a good amount of resources to perform getComputedStyle() and offsetHeight() computations for many nested Divs in the webpages which are expensive resource costs for these particular functions in IE 11.
o These functions are used to calculate the CSS styles for elements and the height of those objects. The seconds that took this time was about 2.5 seconds, but afterwards the majority of the time spent in 6 seconds was styling calculations.
o Please see the attached screenshot.
• Microsoft Team examined further to verify these elements that are costing a good amount of resources in IE 11 is ng-scope binding from AngularJS on each Div element. As well, the property of flex are being used on the div elements that will cause recalculations too. All these elements that are trying to load are being executed by the following file “DNBM/js/lib.js”.
o All these factors together will cost resources to be consumed to load and render all these elements on the pages. AngularJS is optimized with Chrome architecture design and not with IE 11 architecture design. Therefore, there will be a performance difference between the two browsers in rendering AngularJS functionality.
If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://plnkr.co or similar (template: http://plnkr.co/edit/tpl:yBpEi4).
What is the expected behavior?
AngularJs application should work fine on IE 11 without any performance issues.
What is the motivation / use case for changing the behavior?
Which versions of Angular, and which browser / OS are affected by this issue? Did this work in previous versions of Angular? Please also test with the latest stable and snapshot (https://code.angularjs.org/snapshot/) versions.
Affected Browser: IE 11
Other information (e.g. stacktraces, related issues, suggestions how to fix)
Please do let us know in case if you want to re-produce this issue on your side so we can provide support for the same.
KuldeepsinhChavda
All 24 comments
Are you adding many css properties, such as display: flex etc. via ng-style or interpolation in style attributes? I would look into reducing these.
Because angular core does not do any layouting / css setting via interpolated style or ng-style.
I assume the problem lies in your application architecture, and if IE is slow with that then there's nothing we can do.
Maybe you could give an example of a binding that makes the application slow?
Narretz
on 8 Aug 2016
I agree with @Narretz: This doesn't sound related to Angular core, but either other libraries or your application configuration code.
Regarding the _ng-scope on every div_ issue, (although we can't be sure without more info), it sounds like you have debugInfo enabled. Debug info aid in...debugging (at the expense of a performance degradation) and it is strongly recommended to disable in production. The developer guide has section dedicated to configuring your app for running in a production environment.
Regarding the style (and especially the flex-related) issues, it sounds like another UI library/framework is the culprit. Are you using ngMaterial be any chance? Earlier versions of ngMaterial have been reported to be quite slow on IE, but I believe they have considerably improved IE performance in their recent versions.
gkalpak
on 8 Aug 2016
This definitely does not sound like an Angular issue - this sounds like a user app issue with standard best practices for performance when using Angular & writing web frontends. I have not had a problem creating performant complex UIs, including for IE11, for medium to large applications.
Angular itself only calls getComputedStyle once per time when doing animations with ngAnimate I believe. I do know that more recent versions of UI Bootstrap (which I am a maintainer of) do use getComputedStyle and height offset calculations for positioning related logic (tooltips, popovers, datepicker popups, etc.), but its usage is fairly light in performance impact.
I would recommend researching best practices here, including disabling $compilerProvider.debugInfoEnabled, making use of one-way bindings (Angular 1.5), eliminating excessive bindings/watchers, making use of bind once when appropriate to dispose of unnecessary watchers after data is bound, and using constructs such as ng-if and ng-switch if there is no need to render whole swaths of templates to avoid rendering the watchers. There are many articles out there written on all these, and all of this advice is easily searchable.
Otherwise, more advice probably can be given based on the libraries used, although GitHub issues isn't really the right place for this sort of problem generally speaking.
wesleycho
on 12 Aug 2016
I'm going to close this issue because we haven't got any feedback. Feel free to reopen this issue if you can provide new feedback.
Narretz
on 15 Aug 2016
I am facing exactly same problem.
tarekahf
on 22 Jun 2017
@tarekahf as you can see the OP for this issue has never provided s repro of the problem so there's nothing we can do.
Narretz
on 22 Jun 2017
@Narretz :
What if I provide you with the IE Dev Tools Performance Profiler details similar to that in the snapshot below, and provide you with the related AngularJS APIs used?
See snapshot below:
Tarek
tarekahf
on 22 Jun 2017
A minimal repro is needed. In a full application the problem could come from many sources. Therefore the APIs and the profiles are not enough.
Narretz
on 22 Jun 2017
Yes, I fully understand... this is going to be so challenging.
For now I will provide the following:
- I removed this code part from the main root controller, and I saved 2 seconds when executed under IE11:
//List elements with duplicate IDs
$('[id]').each(function(){
var ids = $('[id="'+this.id+'"]');
if(ids.length>1 && ids[0]==this) {
console.warn('Multiple IDs #'+this.id);
}
})
- Using directives with
$compileservice to compile relatively large blocks of HTML Input Elements. This is needed to dynamically add validation rules such asng-requiredandng-maxwhich are loaded from DB. Please check this posts here. Search for directivecheck-if-requiredto give you an idea about the directive high-level structure. I am nearly certain that this directive is causing IE to freeze momentarily. I can my custome warning messages in the console (generated from the directive link function) while the red progress bar is stuck up. See animated gif below. Also, check this plunker sample which implements the basic idea ofcheck-if-required.
I hope this will allow you to give us some feedback.
Tarek
tarekahf
on 22 Jun 2017
The first code block has nothing to do with AngularJS, that's pure jquery DOM manipulation. Maybe it's simply because you have too many elements in the DOM? Older browsers have a harder time to cope with many elements at the same time.
Narretz
on 23 Jun 2017
If you are sure this directive is giving you the problems, then you should be able to create a MINIMAL plnkr that reproduces the freeze / lag. Minimal means no extra css, html, js - only the bare minimum to reproduce the problem.
Narretz
on 23 Jun 2017
Sure I understand. Did you see the plunker sample I provided above? I that OK?
tarekahf
on 23 Jun 2017
@tarekahf no, the plnkr is not enough since it doesn't reproduce the problem in IE
Narretz
on 24 Jun 2017
In order to reproduce the problem, I have to develop a working sample plunker with 500+ fields? Just wondering how?
tarekahf
on 28 Jun 2017
I am observing $rootScope.$Digest is taking more time when Force Async Events is called in my app. Specifically with ng-focus event. Chrome does this execution within a second but IE would take more than 10 seconds.... Any help is great full....
Deepak5621
on 14 Jul 2017
This is definitively an AngularJS issue. I have the same issue in an enterprise application.
Basically IE hangs while angular compiles the templates, it take up to 10 seconds in my case to compile and render 15 templates, during which the browser freezes out.
albanx
on 15 Aug 2018
I think we need to find a solution for IE. Based on our case, it doesn't seem that we will be able to move away from IE soon.
tarekahf
on 15 Aug 2018
I have to specify that I am using angularjs 1.5.8. My last effort will be to update to 1.7.2.
Then the strategy will be to leave unhappy that tiny amount if IE users, until I migrate to the new framework.
albanx
on 15 Aug 2018
@tarekahf @albanx Did you guys figure out a solution? Our clients are municipal and forced to use IE and now our app is encountering the same bug.
kepoly
on 22 Aug 2018
Just to reiterate, we'd take a look at this if we had a reproduction that showed the difference
Narretz
on 23 Aug 2018
https://www.holidayautos.com/book?pickupDateTime=2018-11-22T10%3A00&returnDateTime=2018-11-25T10%3A00&age=30&clientID=463473&ct=MP&countryID=US&curr=EUR&elID=521534946633556&ln=en-gb&pickupCountryCode=US&residenceID=IE&returnCountryCode=US&pickupID=3716&pickupName=Los%20Angeles%20-%20Airport%20(California)&returnID=3716&returnName=Los%20Angeles%20-%20Airport%20(California)#/vehicles
Scroll and you will see that IE freezes.
Actually on the scroll function we compile a list of components manually, and then append them to the dom. Most of browsers is smooth, IE11 totally freezes.
You and your shinny team can decide to take a look or not, or try to negate the evidence, or find any other justification, but the fact remains, this is a problem and a honest reply from angularjs legacy team would be "we do not care more about this and we won't make any upgrade to fix it."
albanx
on 23 Aug 2018
It's true that we are not actively looking into this problem with IE11 and that the chances of doing something about it are slim. However, we always said that we would take a look if someone could give us a minimal reproduction. (I forgot to write minimal yesterday). We cannot debug it from a complete webpage where we don't see any code. And it also doesn't make sense when the website (like your links) contains jquery, too. Maybe it's jquery? Maybe IE11 is reaching its natural performance limit because the JS is too heavy for it? You are essentially expecting that IE11 runs the same as modern browsers, but this is simply nothing that AngularJS can do. And there are many AngularJS websites that run well in IE.
If I were you I'd try to remove specific parts of the website one for one, and then see if the problem still exists.
Narretz
on 23 Aug 2018
Again please do not make speculation we are not juniors or ignorants
developers. If we have reported this problem is because exists. The above
links are the deploy version of the angularjs app and I can ensure you that
jquery has nothing to do it that indeed jquery performs pretty well even in
older ie. At the top of this report you have a plkr.
In any case it takes 1min to open the ie11 profiler tool and see that the
digest apply cycle hangs the browser
On Thu, 23 Aug 2018, 07:46 Martin Staffa, notifications@github.com wrote:
It's true that we are not actively looking into this problem with IE11 and
that the chances of doing something about it are slim. However, we always
said that we would take a look if someone could give us a minimal
reproduction. (I forgot to write minimal yesterday). We cannot debug it
from a complete webpage where we don't see any code. And it also doesn't
make sense when the website (like your links) contains jquery, too. Maybe
it's jquery? Maybe IE11 is reaching its natural performance limit because
the JS is too heavy for it? You are essentially expecting that IE11 runs
the same as modern browsers, but this is simply nothing that AngularJS can
do. And there are many AngularJS websites that run well in IE.If I were you I'd try to remove specific parts of the website one for one,
and then see if the problem still exists.—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/angular/angular.js/issues/15005#issuecomment-415309158,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABFAqAGhvrFEPArNRR23kDzeFdVCAd8Zks5uTk-6gaJpZM4Je4rW
.
albanx
on 23 Aug 2018
@albanx - I am sorry that your app is experiencing these problems. It must be frustrating for you. We do not doubt that the browser is not performing correctly in your application and we are not suggesting that AngularJS is not at fault.
As a team we really do want to do our best to help you, and we are making no assumptions about your abilities or experience.
The simple fact is that we have limited resources to investigate issues with older browsers, so you can help us to help you by providing the simplest possible reproduction that proves that it is AngularJS that is at fault. This means removing all 3rd party libraries other than AngularJS and also cutting the application code down to an absolute minimum.
petebacondarwin
on 23 Aug 2018
Related issues
visnup
·
3Comments
kishanmundha
·
3Comments
piu
·
3Comments
th0r
·
3Comments
WesleyKapow
·
3Comments
Most helpful comment
I am observing $rootScope.$Digest is taking more time when Force Async Events is called in my app. Specifically with ng-focus event. Chrome does this execution within a second but IE would take more than 10 seconds.... Any help is great full....