Output Console — 50× più veloce grazie allo shadow DOM
L'Output Console — la finestra di sviluppo che cattura i log della pagina — aveva un limite di vecchia data: oltre qualche centinaio di voci il rendering iniziava a rallentare. 700 voci nella lista davano una finestra che si bloccava a ogni aggiornamento — ~5 secondi per re-render. Nella v3.2.30 abbiamo avvolto la finestra in uno shadow DOM — e oltre all'isolamento degli stili dalla pagina è arrivato uno speed-up inaspettato ed enorme. Le stesse 700 voci ora vengono renderizzate in ~100 millisecondi. Cinquanta volte più veloce.
Da dove veniva la lentezza
L'Output Console viveva in passato nell'albero DOM della pagina come un elemento normale. Ogni nuova voce costringeva il browser a ricalcolare gli stili per ogni elemento dell'albero — perché il CSS della pagina poteva teoricamente influenzarne uno. Style recalc su 700+ elementi, più 500+ pagine di CSS sullo sfondo, più una finestra che doveva ri-renderizzarsi a ogni nuovo log — il tutto sommava un lag visibile.
Costo extra: alcuni servizi (Google Workspace, Notion, intranet aziendali) spediscono migliaia di regole CSS nel foglio di stile della pagina. Ogni nuova riga nell'Output Console innescava una ricerca di match su migliaia di selettori — qualcuno di loro ci tocca?
Cosa ha fatto lo shadow DOM
Renderizzare la finestra come shadow root dice al browser: gli stili della pagina non si applicano a questo sottoalbero. A ogni nuova voce il browser salta la ricerca di match dei selettori. Lo style recalc si applica solo agli stili interni allo shadow root — qualche decina di righe del CSS proprio dell'Output Console invece di migliaia di righe della pagina.
L'effetto: il profiler ha mostrato che l'87% del tempo di rendering pre-shadow DOM veniva sprecato in RecalculateStyle per i nodi dell'Output Console. Dopo la migrazione quel costo è quasi sparito.
Come l'abbiamo misurato
Repro: una pagina con Output Console attiva + 700 voci precedenti (Network, Console, dataLayer). Tab Performance dei DevTools, azione: JUSTZIX.log('test ' + i) in un ciclo 100×.
- Prima della v3.2.30 (light DOM): 100 nuove voci = ~5000 ms di tempo di rendering principale.
- Dopo la v3.2.30 (shadow DOM): 100 nuove voci = ~100 ms.
Il moltiplicatore reale dipendeva dalla pagina — su una minimale (about:blank) solo 5×, su un Google Workspace di produzione più vicino a 60×. "50×" è la mediana approssimativa — per questo la usiamo nel titolo.
Cosa cambia nel workflow
Tre situazioni concrete in cui conta:
- Debug di lunga durata — lasci l'Output Console a schermo per ore con normale attività della pagina sullo sfondo (autosaves, polling, eventi GTM). Prima la finestra diventava lenta dopo un po'; ora resta reattiva.
- Tempesta di rete — analisi del waterfall di una pagina che spara ~100 richieste al secondo (es. infinite scroll con lazy-load). Prima la finestra restava indietro di mezzo secondo rispetto al traffico reale; ora tiene il passo.
- Spia del dataLayer — le pagine con un GTM molto attivo (e-commerce, dashboard CRM) spingono 5–10 eventi al secondo. La lista dei "nuovi push" cresce in fretta — ora puoi scorrerla in tempo reale.
Questo tocca le altre finestre
L'Output Console è stata la prima finestra migrata allo shadow DOM (v3.2.30). Lo stesso pattern è poi passato all'AI Helper (v3.2.76, vedi il post separato). Le restanti finestre di sviluppo — pannello CSS, pannello JS, console JS — vivono ancora nel light DOM. Ognuna di esse ha molti meno nodi (pannello CSS = una textarea + un header, pannello JS analogo), quindi non subiscono lo stesso impatto sulle performance. La loro migrazione è prevista come naturale estensione dell'isolamento.
Vedi anche
- Output Console — descrizione completa della finestra e dei suoi tab
- AI Helper in uno shadow DOM — il secondo passo dell'isolamento delle finestre
- Finestre nella pagina — ogni finestra di sviluppo che l'estensione porta
Installa JustZix — e avrai un'Output Console che tiene il passo con il traffico della pagina.
Valuta questo articolo
Nessuna valutazione — sii il primo.