Website/Anwendung mit Polymer-Komponenten Lasten extrem langsam auf IE11 gemacht

Question

Wir erwägen Polymer-Technologie (& der Darts Sprache), um eine öffentliche/Internet-Web-Anwendung/Website zu entwickeln. Beim Testen/Validieren des Ansatzes stießen wir auf einen potenziellen Show-Stopper. Die (grundlegende) Seite führt eher o.k. auf verschiedenen Browsern & Plattformen, aber es ist extrem langsam auf Internet Explorer 11 unter Windows 8.1.

Das Problem scheint nicht zu unserem spezifischen Code verwandt zu sein, wie es scheint einfach, das Verhalten unter Verwendung von zum Beispiel der Polymer Demo (Menü-Taste) zu reproduzieren: https://www.polymer-project.org/components/paper-elements/demo.html#paper-menu-button

Auf IE11 (11.0.9600.17351), dauert es mehr als 16 Sekunden, um diese Seite zu laden. Mit dem Profiler "UI Responsiveness" von IE11 wurde eine .diagsession-Datei erstellt: http://novonov.be/tmp/polymer-paper-menu-button-demo.diagsession Auf den ersten Blick scheint das Problem nicht im Zusammenhang mit Netzwerkverkehr/Anzahl der herunterzuladenden Dateien zu stehen. 15,73 Sekunden werden in "DOM-Ereignis (readystatechanged)" verbracht. Wir haben keine andere Version von IE getestet - nur IE11.

Gibt es eine Lösung/Abhilfe für dieses Problem? Oder macht dieses Problem, dass eine Website/Web-Anwendung, die mit Polymerkomponenten erstellt wurde, nicht mit einer angemessenen Leistung in IE (11) funktioniert? Dies könnte ein Showstopper für öffentliche Internet-Websites/Web-Anwendungen sein.

Answer 1

Die Lösung des Problems wurde von jakemac53 auf https://github.com/Polymer/polymer/issues/891

Ah gebracht, so dass man mich ein bisschen nahm, um herauszufinden, aber es ist wegen der Schatten dom css polyfill auf den großen CSS-Dateien laufen enthalten sein in jedem Ihrer Elemente (speziell Bootstrap). Glücklicherweise ist es ziemlich einfach, dieses polyfill vom Laufen zu trennen (und es wird nicht für Bootstrap benötigt). Fügen Sie einfach die „no-Shim“ Attribut, um alle Ihre verbunden Sheets, so Bootstrap zum Beispiel sollte wie folgt aussehen:

Ansonsten ist die polyfill alle Inhalte aus der Datei zu kopieren hat und gelten seine Transformationen und stempeln Sie das Ergebnis dann in ein Inline-Stylesheet . Wenn dies viele Male auf einem großen Stylesheet wie Bootstrap getan wird, verlangsamt es wirklich Dinge.

Answer 2

Die vulcanize tool ist der Schlüssel zum Produzieren einer App. Polyfill'd-Browser wie IE11 sind von Natur aus langsamer als native HTML-Importe. Daher ist es wichtig, die Anzahl der Anfragen und Setup-Arbeiten zu reduzieren, die die Polyfills erledigen müssen.

Zum Beispiel konnte ich die SPA-Demo nehmen (https://www.polymer-project.org/articles/demos/spa/final.html) von ~ 20er bis ~ 3.7s, nur durch Laufen vulcanize: http://www.webpagetest.org/result/141105_7P_178Q/

Answer 3

Als Reaktion auf @ebidel s Antwort. I Dart bedeutet, dass pub build von der Befehlszeile statt von DartEditor ausgeführt wird.
Bei Ausführung von der Befehlszeile wird mode=release standardmäßig verwendet. DartEditor ruft pub build mit mode=debug auf. Der Freigabemodus verursacht Baumschütteln und Verkleinerung, was zu einem kleineren Code führt. Soweit ich weiß, werden die anderen Dinge vulcanize für Polymer.js durch den Dart-Polymer-Transformator getan.

Einige Hinweise

admin_service_repository/admin_service_repository.dart

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

so Polymer auch über Änderungen benachrichtigt wird, wenn die Daten zurück, nachdem Polymer Laden erstellt bereits den Blick von der serviceDescriptions Liste.

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']))); 
} 

Erstellung der Liste und das Hinzufügen der Elemente services ein wenig vereinfacht werden könnte.

admin_service_repository/node_view.dart

@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 Sie eine Liste von Strings erstellen und sie im Konstruktor verketten.
Sie können wie

mehrzeiligen Stringliterale erstellen

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

I

hinzugefügt

- 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 

zum pubspec.yaml loszuwerden der Warnungen nach dem Polymer 0.15.xxx aktualisieren.

Answer 4

Es scheint, dass die Langsamkeit in diesem Beispiel durch die schiere Anzahl der Elemente auf der Seite verursacht wird. In den Dropdown-Feldern für die Länderauswahl gibt es ~ 240 Elemente von Papierelementen, und es gibt 4 dieser Dropdown-Menüs. Insgesamt befinden sich ~ 1000 Elemente auf der Seite. Jeder von diesen hat zwei benutzerdefinierte Elemente, Papier-Ripple und Core-Symbol, so dass wir nun bis zu ~ 3000 benutzerdefinierte Elemente haben, ganz zu schweigen von all den anderen Elementen. Ich habe bestätigt, dass das einfache Kommentieren der meisten Länder die Leistung dramatisch verbessert.

In Firefox und IE laufen sie unter den Polyfills, die ihre Leistungsprobleme vergrößern, und deshalb sehen Sie solche Langsamkeit in jedem dieser Browser. Leistung ist definitiv etwas, an dem das Polymer-Team aktiv arbeitet (insbesondere in Bezug auf die Polyfills), aber jedes Mal, wenn Sie so viele Elemente auf der Seite haben, wird es Probleme in langsameren Browsern verursachen.