Wie verbessert man die Parsing-Performance von Angular 2?

Question

Wir schreiben unsere Benutzeroberfläche mit Angular 2. Da dies so neu ist, gibt es nur sehr wenige Ressourcen, also bitte entschuldigen Sie, wenn meine Frage albern erscheint und bereits beantwortet wurde.

Zuerst ein wenig Hintergrund. Unser Produkt besteht aus "Modulen", die Widgets sind, die auf einer Seite abgelegt werden können. Da nicht alle Module neu geschrieben werden, um Angular 2 zu verwenden, wird es auf einer Seite gleichzeitig eine Mischung aus nicht-eckigen und eckigen Modulen geben. Aus diesem Grund haben wir beschlossen, jedes Angular2-Modul zu einer eigenständigen eckigen App zu machen.

In der Prototyp-Phase sah alles gut und schön aus, jedoch ein paar Monate vor der Veröffentlichung, und einige Wochen vor der Veröffentlichung sah sich jemand unsere Seitenladezeiten an und war weniger als beeindruckt. Auf meinem Rechner sind 5 Module mit aktiviertem prodMode in etwa 2,5 Sekunden zum Rendern mit 2 unserer kompliziertesten Module erforderlich, die jeweils eine Sekunde benötigen. Die zwei größten Vorlagen, die ich habe, sind 32 KB und 80 KB groß, aber da die Verarbeitungszeit die gleiche ist, vermute ich, dass die lineare Länge nicht so viel wie die strukturelle Komplexität beiträgt, und sie sind ziemlich komplex. Die anderen 3 Module sind viel einfacher.

Aus dieser Zeitachse scheint viel Zeit in das Analysieren der Vorlage und das Laden von Komponenten investiert worden zu sein. Also dachte ich, dass das vielleicht daran liegt, dass jedes Modul eine unabhängige eckige App ist und sie wahrscheinlich nicht die zwischengespeicherten Komponenten teilen. Also habe ich die BROWSER_APP_COMPILER_PROVIDERS aus der Liste der App-Provider in die Plattform-Provider verschoben. Das hat dazu geführt, dass alle Module einen RuntimeCompiler (glaube ich) wiederverwenden. Aber in der großen Skala der Dinge hat es die Situation nicht viel verbessert. Die Gesamtzeit ist auf 2,3 Sekunden gesunken, was den Aufwand kaum wert ist.

Jetzt sind die Module meist Assistenten. Das heißt, sie sitzen und sehen hübsch aus, bis der Benutzer auf sie klopft/klickt, um sie zu aktivieren. Das brachte mich dazu zu denken, was wäre, wenn ich das Template-Parsing inszenieren könnte? Wenn ich Angular sagen könnte, Wizard Steps bei Bedarf zu parsen, könnte ich die Ladezeit im Austausch für etwas Verzögerung verringern, wenn ich das Modul interagiere. Das ist es, was ich gerade erforsche, aber ich würde gerne die Beiträge der Community hören.

Vielen Dank für das Lesen.

UPDATE: Ich verwende RC.3.

Answer 1

Offline (Pre) Compiler könnte helfen, aber es ist noch nicht fertig.

Sie könnten versuchen, kopierten/duplizierten HTML-Code durch separate Komponente zu ersetzen, um die Vorlagengröße zu reduzieren. Baumartige UI-Struktur mit wiederverwendbaren Komponenten könnte helfen.

Eine andere Möglichkeit ist das Lazy Loading: Laden Sie den Wizard, wenn der Benutzer auf sie klickt (möglicherweise wird das Vorladen verwendet).

Ich denke, es wäre hilfreich, CPU-Profil zu eckigen Team, so dass sie Compiler/Parser optimieren könnte.

Answer 2

Ok, Danke für das Schreiben an mich. Also, wenn ich das richtig verstehe, verhält sich jedes Widget wie eine andere eckige App. Daher ist die Basis-Modul oder Basis-Winkel App abhängig von mehreren abhängigen injizierbaren Apps. Nun nehme ich diese Tatsache an, dass Sie bereits die Bündelung und Verkleinerung der Produktion Skript fertig gemacht haben. Abgesehen davon wollte Just wissen, was die SLA der API ist, die die Anfrage bedient. Oft beobachte ich, dass Leute UI wegen Langsamkeit beschweren. Aber, war es früher das Backend nicht die SLAs zu erfüllen. Überprüfen Sie, ob Ihr Back-End-SLA in Ordnung ist.

Als nächstes, was ist Ihre Caching-Strategie von eckigen Modulen. Wie oft werden diese Anfragen an den Server zurückgeschickt? Hier ist ein Haken. Um Caching herum werden alle Komponenten nicht in einen Gefechtszustand versetzt. Eine andere Sache, die ich verstehen wollte, ist, ob Sie RXJS für die Handhabung von Versprechen verwenden oder nicht. RXJS, dramatisch verbessert die Leistung von angular 2 App.

Als nächstes ist die Wiederverwendbarkeit des Codes, sagen wir Verpackung der wiederverwendbaren Code in Direktive und dann injizieren die gleiche an allen erforderlichen Stellen. Dies wird die Codekompilierung kosten.

Überprüfen Sie weiterhin eckige 2 Meilensteine ​​und die neuen Fixes, die um Leistungsverbesserung freigegeben werden. Ich erwarte finale Schlacht bereit Produktionsrahmen für Winkel 2 bis Dezember. Dann werden wir auch unsere Apps auf eckig 2 migrieren. Sogar, in nasdaq, laufen wir derzeit auf 1.5x-Version. Ich hoffe, dies wird Ihnen helfen die Leistung Ihrer App zu verbessern.

Answer 3

In eckigen 2.4 haben wir ein Konzept namens AOT, die die Leistung verbessern können!

Eine Angular-Anwendung besteht größtenteils aus Komponenten und ihren HTML-Vorlagen. Bevor der Browser die Anwendung rendern kann, müssen die Komponenten und Vorlagen vom Angular-Compiler in ausführbares JavaScript konvertiert werden.

Sie können die Anwendung im Browser zur Laufzeit beim Laden der Anwendung mithilfe des JIT-Compilers (Just-in-Time) kompilieren. Dies ist der Standardentwicklungsansatz, der in der gesamten Dokumentation gezeigt wird. Es ist großartig, aber es hat Mängel.

Die JIT-Kompilierung verursacht eine Laufzeitleistungseinbuße. Das Rendern von Ansichten dauert aufgrund des Kompilierschritts im Browser länger. Die Anwendung ist größer, da sie den Angular-Compiler und viel Bibliothekscode enthält, den die Anwendung nicht wirklich benötigt. Größere Apps brauchen länger zum Übertragen und laden langsamer.

Kompilierung kann viele Bindungsfehler für Komponentenvorlagen aufdecken. Die JIT-Kompilierung entdeckt sie zur Laufzeit, was spät ist.

Der AOT-Compiler kann Vorlagenfehler frühzeitig erkennen und die Leistung verbessern, indem er zum Zeitpunkt der Erstellung kompiliert wird.