Material: Help me with really slow performance with IE 11?

[y-chen]

I know that is an already reported issue: #3389, #7377, #8279 and so on but I tried the suggestions and nothing helped in my case.

Here the project info:

• SharePoint 2013 hosted App
• AngularJS v1.5.8
• Angular Material Design v1.1.1
• Internet Explorer 11 v11.0.9600.18538
• Chrome v55.0.2883.87

The problem is always the same, for example in Chrome a date picker opens instantly but with IE it takes ~4 seconds.

I'm trying to disable the animation as suggested by @graphefruit adding his CSS and md-no-ink to the div where Angular App starts (I don't have access to body tag)

Can you help me?
Thank you

[graphefruit]

Hello @y-chen,

I don't know if the CSS-Hacks are still valid, because they were written for Angular-Material RC3 (don't know exactly).
Have you already checked if the google chrome animation panel still shows you triggered anmiations?

So after I'm stucked with RC.5 because I've made many optimizations and grabbed into the CSS on my own I just can give you some advices again:

1. Disable theming:

$mdThemingProvider.disableTheming();
$provide.constant('$MD_THEME_CSS', '');

1. Search for animations and disable them
2. Delete all box-shadows and replace them with simple borders.
3. $httpProvider.useApplyAsync(true);
4. $compileProvider.debugInfoEnabled(false);
5. $compileProvider.commentDirectivesEnabled(false); (Comes with Angular 1.5.7 or so)
6. $compileProvider.cssClassDirectivesEnabled(false); (Comes with Angular 1.5.7 or so)
7. Smaller the CSS of angular-material yourself (I've stripped it down from 80k to 2k)
8. I've wrote a little blog post about performance (I know there are much out there, but I felt it wasn't stripped down to the real needs, so I've wrote a little bit down on my own)
   -> http://coding-graphefruit.blogspot.de/2016/10/performance-angularjs-javascript.html
   -> http://coding-graphefruit.blogspot.de/2016/10/performance-inside-your-css.html

Greetings

[y-chen]

Hello @graphefruit and thank you for your answer.
Yes, I found your blog and I had already tried some of your suggestions like disable Theming.

What I haven't tried was reduceAngular Material CSS file, so I directly removed the file angular-material.layout-attributes.min.css and now the perfomances with IE 11 are also as Chrome! And the animations are still there.

Is this file important for Angular Material?

[graphefruit]

@y-chen, the material.layout-attributes is a relict of RC1, its not available on RC5 or 1.1.1 have a look here: https://cdnjs.com/libraries/angular-material/1.1.1

[y-chen]

@graphefruit same for angular-material.layouts.min.css and angular-material.layouts.ie_fixes.css?
I installed Angular Material via nuGet that downloaded all these files.
In this project I can't use CDN becouse the customer proxy blocks access to external sites.

[graphefruit]

Right just have a look on the CDN link. These files doesn't exists. If you delete them and everything works like expected there's no problem. I think it was an old solution for some layout fixes before it was merged

[graphefruit]

@y-chen You don't need to use the CDN (and in my opinion you shouldn't) just download the files from CDN and overwrite them with your local ones and you're good to go.
Anything else you need help with the performance? Else I think this topic can be closed

[Splaktar]

We recently posted a Performance Guide for developers who need to support IE11: https://material.angularjs.org/latest/performance/internet-explorer

[graphefruit]

Hi @Splaktar thanks for the update and for the documentation of this issue.

I think this documentation clears out some big issues.
But there are some other performance issues.
E.g. animations (and I don't mean the ripples) rather like floating animations, e.g. radio-buttons, the circle is "appearing".

Are there plans to make them optional aswell?
Like:
$mdAnimations.disableAnimations()

Also is there any plan to remove unneeded elements like if you don't use md-card inside your setup you wouldn't need the CSS-styles for it.

If not maybe it could be added to the documentation that there could be some "tweaks" inside of it.
Animations can be disabled by the user by overwriting them in their local CSS-File, and after there are (I think) not more ground breaking changes the user wouldn't need to adapt all day long.

Also there could be some CSS-Tweaks like disabling box-shadow or disable border-radius
There were some issues with more information, maybe this could be linked in the documentation on own risk :)
Thanks so far for your awesome work.
Graphefruit

[Splaktar]

@graphefruit That is just the first version of the IE11 Performance Guide. I'd welcome suggested changes via an issue to discuss them and later a PR to add the new guidance.

I know that some of the CSS tweaks discussed in https://github.com/angular/material/issues/8329 did not get into the guide since David said that he didn't have time to test them. If you wanted to organize those, test them, and write up some proposed documentation, then I would be happy to consider those details for the guide.

As for animation overrides specifically, https://github.com/angular/material/issues/865 is open to track adding docs for this. If you wanted to work on that, I would appreciate it 😃

For picking certain components and excluding others, the material-tools repo allows for doing just that. It hasn't been touched in almost a year, but it should theoretically still work. I'm hoping to look into it some more and verify that it works sometime soon.

As for a simple disableAnimations() API, I haven't really looked into material.core.animate much at all. I know that there is no disable feature today, but it's not clear to me how much work it would be to add it. It looks like we currently do some extra Polyfill work there to support AngularJS 1.3 and earlier. That could probably be dropped to simplify things. Can you please open an enhancement request for this?

[graphefruit]

I gonna give it a look in a next ticket.
Actually my App is locked on RC-5, I nearly digged into every material file and changed it the way I need it ;) (Knowing that this doesn't work for everyone)
Cant give you a timeframe yet, but thank you for your honest feedback and your fast response :)