Web Components Rendering-Leistung

Question

Gibt Webkomponenten eine bessere Leistung im Vergleich zu Native HTML-Elementen. Da jedes Element nur dann mutiert wird, wenn es an DOM angehängt wird. Daher führen teure Vorgänge innerhalb von Element-Callbacks zu einer schlechten Leistung.

Ich schrieb eine Beispiel Web-Komponente mit einigen teure Implementierung in connectedCallback Handle, Wenn ich versuche, die Komponente zu rendern, nahm jede Komponente Zeit in einer fortlaufenden Reihenfolge.

Ich sehe keine Referenz bezogenen Performance-Pin-Punkte auf Web-Komponenten.

---

aktualisieren 1

ich eine gegründete kleine Seite mit india und Web Component Implementierung haben, scheint Webkomponenten Seite 4 ms Native nach Abschluss nahm aber dauerte nur 1 ms. Verweisen Sie auf meine Leistungsbildschirme. In Webkomponenten dauert das Skripten mehr Zeit.

india HTML Beispiel:

---

Web Component Beispiel:

Answer 1

Da benutzerdefinierte Elemente native HTML-Elemente erweitern (über class extends HTMLDivElement), mit zusätzlichen Funktionen hinzugefügt, würde ich sagen: im besten Fall können sie nur so gut wie native HTML-Elemente sein.

Der Leistungszuwachs ist im Vergleich zu Drittanbieter-Frameworks (die diese neue Technologie nicht nutzen): Webkomponenten sollten schneller sein.

Sie können es sehen, wenn Sie native vs polyfile Custom Elements-Implementierungen vergleichen.

Answer 2

Mit StencilJS (github) können Sie die Leistung Ihrer Webkomponente erheblich verbessern. Es wird ziemlich viel Optimierungsarbeit leisten und ein virtuelles DOM zu Ihrer Webkomponente für ein optimales Rendering implementieren.

können Sie überprüfen die Leistungen here.