Output Console — 50× faster thanks to shadow DOM
The Output Console — the developer window that catches page logs — had a long-standing limit: above a few hundred entries the rendering started to drag. 700 entries on the list gave a window that stalled on every update — ~5 seconds per re-render. In v3.2.30 we wrapped the window in a shadow DOM — and on top of style isolation from the page came an unexpected, huge speed-up. The same 700 entries now render in ~100 milliseconds. Fifty times faster.
Where the slowness came from
The Output Console used to sit in the page's DOM tree as a regular element. Every new entry forced the browser to recompute styles for every element in the tree — because page CSS could theoretically affect one of them. Style recalc on 700+ elements, plus 500+ pages of CSS in the background, plus the window having to re-render on every new log — that added up to visible lag.
Extra cost: some services (Google Workspace, Notion, corporate intranets) ship thousands of CSS rules in the page stylesheet. Every new line in the Output Console kicked off a match search across thousands of selectors — does any of them affect us?
What shadow DOM did
Rendering the window as a shadow root tells the browser: page styles don't apply to this subtree. On every new entry the browser skips the selector match search. Style recalc only applies to styles inside the shadow root — a few dozen lines of the Output Console's own CSS instead of thousands of page lines.
The effect: profiler showed 87% of pre-shadow DOM render time was wasted on RecalculateStyle for the Output Console's nodes. After the migration that cost is almost gone.
How we measured it
Repro: a page with an active Output Console + 700 prior entries (Network, Console, dataLayer). DevTools Performance tab, action: JUSTZIX.log('test ' + i) in a 100× loop.
- Pre v3.2.30 (light DOM): 100 new entries = ~5000 ms main render time.
- Post v3.2.30 (shadow DOM): 100 new entries = ~100 ms.
The actual multiplier depended on the page — on a minimal one (about:blank) only 5×, on production Google Workspace closer to 60×. "50×" is the rough median — that's why we use it in the headline.
What it changes in workflow
Three concrete situations where it matters:
- Long-running debug — you leave the Output Console on screen for hours with normal page activity in the background (autosaves, polling, GTM events). Before, the window became sluggish after a while; now it stays responsive.
- Network storm — analyzing the waterfall of a page firing ~100 requests per second (e.g. infinite scroll with lazy-load). Before, the window lagged half a second behind real traffic; now it keeps up.
- dataLayer spy — pages with a very active GTM (e-commerce, CRM dashboards) push 5–10 events per second. The "new pushes" list grows fast — you can now scroll through it in real time.
Does this affect other windows
The Output Console was the first window migrated to shadow DOM (v3.2.30). The same pattern then moved to the AI Helper (v3.2.76, see the separate post). The remaining developer windows — CSS pane, JS pane, JS Console — still live in light DOM. Each of those has far fewer nodes (CSS pane = one textarea + a header, JS pane likewise), so they don't suffer the same performance hit. Migrating them is planned as a natural extension of isolation.
See also
- Output Console — full description of the window and its tabs
- AI Helper in a shadow DOM — the second step of window isolation
- On-page windows — every developer window the extension ships
Install JustZix — and have an Output Console that keeps up with page traffic.
Rate this post
No ratings yet — be the first.