sito/applicazione realizzati con componenti in polimero carichi estremamente lenti su IE11

Question

Stiamo considerando la tecnologia dei polimeri (& linguaggio dei dart) per sviluppare un'applicazione/sito web pubblico/internet. Durante il test/la convalida dell'approccio, abbiamo riscontrato un potenziale stop-stop. Il sito (di base) si sta comportando piuttosto o.k. su diversi browser & piattaforme, ma è estremamente lento su Internet Explorer 11 su Windows 8.1.

Il problema non sembra essere correlato al nostro codice specifico, come sembra facile da riprodurre il comportamento utilizzando, ad esempio, il polimero demo (tasto menu): https://www.polymer-project.org/components/paper-elements/demo.html#paper-menu-button

On IE11 (11.0.9600.17351), ci vogliono più di 16 secondi per caricare quella pagina. Con il profiler "UI Responsiveness" di IE11, è stato creato un file .diagsession: http://novonov.be/tmp/polymer-paper-menu-button-demo.diagsession A prima vista, il problema non sembra essere correlato al traffico di rete/al numero di file da scaricare. 15,73 secondi trascorsi in "evento DOM (readystatechanged)". Non abbiamo testato un'altra versione di IE - solo IE11.

Esiste una soluzione/soluzione alternativa per questo problema? Oppure questo problema fa sì che un sito Web/un'applicazione web creata con componenti polimerici non funzioni con prestazioni ragionevoli in IE (11)? Questo potrebbe essere un ostacolo per siti Web pubblici/applicazioni web.

Answer 1

La soluzione al problema è stato portato da jakemac53 su https://github.com/Polymer/polymer/issues/891

Ah, in modo che mi ha preso un po 'per capire, ma la sua causa della polyfill ombra dom css in esecuzione su grandi file CSS essere incluso in ciascuno dei tuoi elementi (in particolare bootstrap). Fortunatamente è piuttosto facile da disattivare questo polyfill dall'esecuzione (e non è necessario per bootstrap). È sufficiente aggiungere l'attributo "no-shim" a tutti i vostri fogli di stile collegate, in modo da bootstrap per esempio dovrebbe essere simile:

Altrimenti il ​​polyfill deve copiare tutto il contenuto del file e applicare le sue trasformazioni e quindi stampare il risultato in un foglio di stile in linea . Quando questo viene fatto molte volte su un foglio di stile di grandi dimensioni come il bootstrap rallenta davvero le cose.

Answer 2

Il vulcanize tool è la chiave per la produzione di un'app. I browser Polyfill come IE11 saranno intrinsecamente più lenti delle importazioni native in HTML, quindi è importante ridurre il numero di richieste e il lavoro di installazione che i polyfill devono fare.

Per esempio, mi è stato in grado di prendere la SPA demo (https://www.polymer-project.org/articles/demos/spa/final.html) da ~ ~ 20 anni a 3.7s, semplicemente eseguendo vulcanize: http://www.webpagetest.org/result/141105_7P_178Q/

Answer 3

In risposta alla risposta @ebidel s. I Freccette significa eseguire pub build dalla riga di comando anziché da DartEditor.
L'esecuzione dalla riga di comando mode=release viene utilizzata per impostazione predefinita. DartEditor chiama pub build con mode=debug. La modalità di rilascio fa tremare l'albero e la minificazione che porta a un codice più piccolo. Per quanto ne so le altre cose vulcanize fa per Polymer.js è fatto dal trasformatore Dart Polymer.

Alcuni indizi

admin_service_repository/admin_service_repository.dart

@observable List serviceDescriptions = toObservable([]); 
// instead of 
// @observable List serviceDescriptions = []; 

così polimero viene notificato circa i cambiamenti, anche quando si caricano i rendimenti dei dati dopo Polymer già creato la vista dalla lista serviceDescriptions.

for (Map service in services) { 
    //String name = service['name']; 
    //ServiceDescription sd = new ServiceDescription(name, service['defaultUrl'], service['description'], service['exampleContent']); 
    //addService(sd); 
    serviceDescriptions.addAll(
     services.map((s) => new ServiceDescription(s['name'], s['defaultUrl'], 
      s['description'], s['exampleContent']))); 
} 

creazione della lista e aggiungendo gli elementi per services potrebbe essere semplificato un po '.

admin_service_repository/node_view.dardo

@observable get allChildren { 
// List list = []; 
// for (Node child in node.children.values) { 
//  list.add(child); 
// } 
// return list; 
    return node.children.values.toList(); 
    } 

In lib/invoke_service si crea una lista di stringhe e concatenare nel costruttore.
È possibile creare stringhe multilinea come

String someString = r''' 
{ 
    xxxx 
} 
'''; 

ho aggiunto

- polymer: 
    inline_stylesheets: 
     lib/bootstrap/css/bootstrap.min.css: false 
     lib/bootstrap/css/bootstrap.min.css: false 
     lib/css/op.css: false 
     lib/font-awesome-4.2.0/css/font-awesome.min.css: false 

al pubspec.yaml per sbarazzarsi delle avvertenze dopo l'aggiornamento a Polymer 0.15.xxx.

Answer 4

Sembra che la lentezza di questo esempio sia causata dal numero di elementi nella pagina. Nei menu a discesa della selezione del paese, ci sono ~ 240 elementi di elementi di carta, e ci sono 4 di questi menu a discesa, quindi in totale ci sono ~ 1000 elementi di elementi di carta sulla pagina. Ognuno di questi ha due elementi personalizzati, ondulazione di carta e icona principale, quindi ora abbiamo circa 3000 elementi personalizzati, per non parlare di tutti gli altri elementi. Ho confermato che commentare semplicemente la maggior parte dei paesi migliora notevolmente le prestazioni.

In Firefox e IE sono in esecuzione sotto i polyfill che ingigantiscono i loro problemi di prestazioni, ed è per questo che si vede una tale lentezza in ciascuno di quei browser. Le prestazioni sono sicuramente qualcosa su cui il team di Polymer sta lavorando attivamente (in particolare in merito ai polyfill), ma ogni volta che si hanno questi molti elementi nella pagina causerà problemi nei browser più lenti.