Output Console — 50× schneller dank Shadow DOM
Die Output Console — das Entwicklerfenster, das die Logs der Seite einfängt — hatte ein altes Limit: Oberhalb einiger hundert Einträge wurde das Rendering zäh. 700 Einträge auf der Liste ergaben ein Fenster, das bei jedem Update stockte — ~5 Sekunden pro Re-Render. In v3.2.30 haben wir das Fenster in ein Shadow DOM gepackt — und zusätzlich zur Stil-Isolation von der Seite kam ein unerwarteter, riesiger Speed-up. Dieselben 700 Einträge rendern jetzt in ~100 Millisekunden. Fünfzigmal schneller.
Woher die Langsamkeit kam
Die Output Console saß früher als gewöhnliches Element im DOM-Baum der Seite. Jeder neue Eintrag zwang den Browser, die Stile für jedes Element im Baum neu zu berechnen — weil das CSS der Seite theoretisch eines davon beeinflussen könnte. Style Recalc auf 700+ Elementen, dazu 500+ Seiten CSS im Hintergrund, plus ein Fenster, das bei jedem neuen Log neu rendern musste — das summierte sich zu sichtbarem Lag.
Zusätzliche Kosten: Manche Dienste (Google Workspace, Notion, Firmen-Intranets) liefern Tausende von CSS-Regeln im Seiten-Stylesheet aus. Jede neue Zeile in der Output Console löste eine Match-Suche über Tausende von Selektoren aus — beeinflusst uns einer davon?
Was das Shadow DOM bewirkte
Das Fenster als Shadow Root zu rendern sagt dem Browser: Seitenstile gelten nicht für diesen Teilbaum. Bei jedem neuen Eintrag überspringt der Browser die Selektor-Match-Suche. Style Recalc gilt nur für die Stile innerhalb des Shadow Root — ein paar Dutzend Zeilen eigenes CSS der Output Console statt Tausender Seitenzeilen.
Der Effekt: Der Profiler zeigte, dass 87% der Pre-Shadow-DOM-Renderzeit auf RecalculateStyle für die Knoten der Output Console verschwendet wurden. Nach der Migration sind diese Kosten praktisch verschwunden.
Wie wir gemessen haben
Repro: eine Seite mit aktiver Output Console + 700 vorhandenen Einträgen (Network, Console, dataLayer). DevTools Performance-Tab, Aktion: JUSTZIX.log('test ' + i) in einer 100×-Schleife.
- Vor v3.2.30 (Light DOM): 100 neue Einträge = ~5000 ms Main-Render-Zeit.
- Nach v3.2.30 (Shadow DOM): 100 neue Einträge = ~100 ms.
Der tatsächliche Faktor hing von der Seite ab — auf einer minimalen (about:blank) nur 5×, im produktiven Google Workspace eher 60×. „50×" ist der grobe Median — deshalb verwenden wir ihn in der Überschrift.
Was sich im Workflow ändert
Drei konkrete Situationen, in denen es zählt:
- Langes Debugging — du lässt die Output Console stundenlang auf dem Bildschirm, während die Seite im Hintergrund normal aktiv ist (Autosaves, Polling, GTM-Events). Vorher wurde das Fenster nach einer Weile träge; jetzt bleibt es reaktionsschnell.
- Network-Storm — Analyse des Waterfall einer Seite, die ~100 Requests pro Sekunde abfeuert (z.B. Infinite Scroll mit Lazy-Load). Vorher hinkte das Fenster eine halbe Sekunde hinter dem realen Traffic her; jetzt hält es Schritt.
- dataLayer-Spy — Seiten mit sehr aktivem GTM (E-Commerce, CRM-Dashboards) pushen 5–10 Events pro Sekunde. Die Liste der „neuen Pushes" wächst schnell — du kannst sie jetzt in Echtzeit durchscrollen.
Betrifft das andere Fenster
Die Output Console war das erste Fenster, das auf Shadow DOM migriert wurde (v3.2.30). Dasselbe Muster zog dann in den AI-Helper ein (v3.2.76, siehe den separaten Beitrag). Die übrigen Entwicklerfenster — CSS-Pane, JS-Pane, JS-Console — leben weiterhin im Light DOM. Jedes davon hat deutlich weniger Knoten (CSS-Pane = ein Textarea + ein Header, JS-Pane ähnlich), sodass sie nicht denselben Performance-Hit erleiden. Ihre Migration ist als natürliche Erweiterung der Isolation geplant.
Siehe auch
- Output Console — vollständige Beschreibung des Fensters und seiner Tabs
- AI-Helper in einem Shadow DOM — der zweite Schritt der Fenster-Isolation
- Fenster auf der Seite — jedes Entwicklerfenster, das die Erweiterung mitbringt
JustZix installieren — und hab eine Output Console, die mit dem Seiten-Traffic Schritt hält.
Bewerte diesen Beitrag
Noch keine Bewertungen — sei der Erste.