Cosa si può fare per migliorare il comportamento di IE11 con il materiale angolare?

Question

Sto lavorando ad un progetto angolare in cui ho usato componenti di materiale angolare (principalmente md-Buttons). L'applicazione mostra varie tessere ognuna delle quali è md-Button. Alla volta avrò probabilmente 20-30 piastrelle al massimo. Queste tessere vengono ripetute usando ng-repeat.

L'applicazione funziona abbastanza bene su Chrome, tuttavia su IE11, sto affrontando il problema di rendering regolarmente. Il rendering richiede circa 5-6 secondi. La commutazione della visualizzazione delle tessere funziona male. Lo schermo di scorrimento porta ai componenti che si attaccano e poi si spostano dopo dire 1 sec.

Probabilmente immagino che il materiale angolare sia troppo pesante per IE11. C'è qualcosa che posso fare per velocizzare le cose su IE11 visto che questo è il mio browser principale?

ho provato:

1. Aggiornamento librerie angolari.
2. Utilizzo della patch MS052
3. Rimozione di alcune transizioni da materiale angolare css.

Nessuno dei precedenti sembra avere molto effetto.

Penso che il materiale angolare sia una buona libreria e ci deve essere qualcosa che può essere fatto per migliorarne il funzionamento in IE11. Per favore qualcuno può suggerire qualcosa di efficace?

Answer 1

Stiamo anche lavorando su progetti angolare e siamo di fronte a problemi di prestazioni con Internet Explorer 11.

ho trovato questo bug su github che mi ha aiutato: https://github.com/angular/material/issues/1771

Soluzione: Nell'ultima versione 0.11 .1 Hanno lavorato sui problemi di visualizzazione del layout per Internet Explorer, quindi ho aggiornato il materiale angolare alla v0.11.1 e ho aggiunto questa riga al file JavaScript angular config:

Le prestazioni migliorate per Internet Explorer 11.

Answer 2

Ho trovato che il wrapping di tutti i miei js in IIFE e aggiungendo "use strict;" ovunque sia appropriato migliora considerevolmente le prestazioni della mia app Angular Material. È ancora più lento di Chrome su IE, ma le prestazioni non sono accettabili.

Answer 3

Il problema è con i CSS.

Usa modulo NPM clean-css per rendere IE compatibile CSS corsa sotto il codice a runkit.com e ottenere IE ottimizzare CSS Per maggiori informazioni visita opzione di compatibilità di clean-css

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) 
    } 
})