Langsame Darstellung einer * ngFor Listenansicht in Angular 2 - Webworker verwenden?

Question

Ich habe eine direkte Listenansicht, wo ein einzelnes Element viele visuelle Elemente hat (stellen Sie sich Quora Frage vor, aber doppelt).

Es wird mit * ngFor gerendert.

Allerdings, die Rendering-Prozess in google dev tools Zeitachse zu analysieren, Alto Ich verwende ChangeDetectionStrategy.OnPush in allen Komponenten gibt es eine Tonne vDom Arbeit benötigt, um die anfängliche HTML zu konstruieren.

Hier ist, wie meine Timeline wie folgt aussehen:

gezoomt:

Beachten Sie, dass während dieser Anweisungen durch den Browser gespielt werden, wird die ui gesperrt. Eine Sekunde auf dem Desktop, drei Sekunden auf dem mobilen Gerät.

Ich habe ein paar Mal gelesen, wie eckig die Konstruktion von vdom in einem Web-Arbeiter abstrahieren sollte, aber ich habe immer noch keine richtige Anleitung gefunden, wie man das implementiert.

Irgendwelche Zeiger? Beispiel?

Answer 1

Dies liegt wahrscheinlich an der ineffizienten Verwendung von NgModules. Auch wenn Sie AOT nicht verwenden, müssen Sie wissen, was vom Compiler vorbereitet wird, z. B. entryComponents