Web Components Probleme: Performance und API

Leistung und API-Herausforderungen bei Web-Komponenten

Web-Komponenten sind um Größenordnungen langsamer als herkömmliche JS-Objekte, da ständig Daten zwischen JavaScript und dem C++-Laufzeitumfeld des Browsers ausgetauscht werden. Dies blockiert die JIT-Inlinierung und führt zu erheblichen Performance-Einbußen.

Vergleich der Erzeugungszeit:

• Herkömmliches JS-Objekt: ~0,01 μs
• Web-Komponente: ~1–3 μs

Tausend Komponenten benötigen 1–3 ms – das ist ein beträchtlicher Teil des 16-ms-Frames. Auch Änderungen an Eigenschaften verbrauchen Mikrosekunden:

• Einfache JS-Zuweisung: Nanosekunden
• Web-Komponenten-Setter: Mikrosekunden

Die Ursache liegt in der kontinuierlichen Kommunikation zwischen JS und dem Browser-Backend. Die Speicherverwendung beträgt 124 Byte pro einfache Web-Komponente gegenüber nur 16 Byte für ein normales JS-Objekt.

Globale Registrierung und Namenskonflikte

Die Registrierung von Komponenten ist global und irreversibel, solange die Tab-Session aktiv ist:

customElements.define( 'ya-button', YandexButton )
// ...
customElements.define( 'ya-button', YahooButton ) // 💥 Fehler: Name bereits vergeben

Namenskonflikte zerstören die Modularität. Obwohl der CustomElementRegistry im Shadow DOM teilweise Abhilfe schafft, gibt es keine Polyfills, und das Zusammenführen von Registries erfordert Namespace-Management.

Alternativen:

• Ein globaler fraktaler Registry wie DNS
• VerLess – Updates ohne Kompatibilitätsbrüche

Lifecycle-Hooks und Shadow DOM

connectedCallback/disconnectedCallback werden bei jeder Bewegung einer Komponente ausgelöst – selbst wenn sie an dieselbe Stelle verschoben wird. Das löst Kaskaden über Unterbäume aus und führt zu unnötigen asynchronen Aufgaben.

Shadow DOM bietet Isolation, erschwert aber die Styling-Verwaltung: adoptedStyleSheets erfordern dynamische Imports von Styles außerhalb des Elements. Elementnamen müssen strikt in Kebab-Case formatiert sein – was mit Standard-DOM-Elementen kollidiert.

Was zählt

• Leistung: Web-Komponenten sind 100 bis 1000 Mal langsamer als JS-Objekte aufgrund der Host-Proxys
• Boilerplate: Serialisierung/Deserialisierung ist für nicht-String-Eigenschaften obligatorisch
• Registrierung: Global, unwiderruflich, anfällig für Namenskonflikte
• Lifecycle: Hooks feuern bei Bewegungen und verursachen Kaskaden
• Shadow DOM: Kompliziert Styling-Anpassungen und Polyfilling

Web-Komponenten unterstützen weder TypeScript-Statik-Typisierung noch eingebaute Reaktivität. Für echte Anwendungen sind daher Frameworks unverzichtbar.

— Editorial Team