Was kann getan werden, um das IE11-Verhalten mit eckigem Material zu verbessern?

Question

Ich arbeite an einem Angular Projekt, bei dem ich Angular Material Komponenten (hauptsächlich md-Buttons) verwendet habe. Die Anwendung zeigt verschiedene Kacheln, von denen jeder md-Button ist. Zu einer Zeit werde ich wahrscheinlich 20-30 Fliesen max. Diese Kacheln werden unter Verwendung von ng-repeat wiederholt.

Die Anwendung funktioniert gut genug in Chrome, aber auf IE11, bekomme ich regelmäßig Rendering-Problem. Rendering dauert ca. 5-6 Sekunden. Das Umschalten von Kacheln funktioniert schlecht. Scrolling Screen führt dazu, dass die Komponenten kleben und sich dann nach etwa 1 Sekunde bewegen.

Wahrscheinlich schätze ich, dass Angular Material für IE11 zu schwer ist. Gibt es etwas, was ich tun kann, um die Dinge auf IE11 zu beschleunigen, da dies mein primärer Zielbrowser ist?

Ich habe versucht:

1. Angular Bibliotheken aktualisiert.
2. Verwenden von MS052-Patch
3. Entfernen einiger Übergänge von Angular Material css.

Keine der oben genannten scheint viel Wirkung zu haben.

Ich denke, Winkelmaterial ist eine gute Bibliothek und es muss etwas getan werden, um seine Arbeit in IE11 zu verbessern. Kann mir jemand etwas effektives vorschlagen?

Answer 1

Wir arbeiten auch an Winkel Projekt und wir stehen vor Performance Probleme mit Internet Explorer 11.

fand ich diesen Fehler auf Github, die mir geholfen: https://github.com/angular/material/issues/1771

Lösung: In der letzten Version 0.11 .1 sie arbeiteten auf Layout Probleme bei der Anzeige für den Internet Explorer, damit ich zu Winkelmaterial v0.11.1 gerade aktualisiert und ergänzt diese Zeile in meinem Winkel Config JavaScript-Datei:

$provide.constant('$MD_THEME_CSS', '/**/'); 

Die Leistung für Internet Explorer 11 verbessert.

Answer 2

Ich fand, dass alle meine js in IIFEs und Hinzufügen von "Use strict;" Überall hat sich die Performance meiner Angular Material App deutlich verbessert. Es ist immer noch langsamer als Chrome auf IE, aber die Leistung ist nicht akzeptabel.

Answer 3

Problem ist mit CSS. siehe Kompatibilitätsoption von Clean-css

Verwenden clean-css NPM-Modul machen IE kompatibel CSS laufen unter Code in runkit.com und IE CSS für weitere Informationen optimieren erhalten

https://runkit.com/npm/clean-css-pre-2.1.0

var request = require("request") 
CleanCSS = require("clean-css-pre-2.1.0") 

var url = "https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.1/angular-material.min.css" 

request({ 
    url: url, 
}, function (error, response, body) { 

    if (!error && response.statusCode === 200) { 
     var source = body; 
     var minimized = new CleanCSS({compatibility : '*'}).minify(source); 
     console.log(minimized) 
    } 
})