Output Console — 50× más rápida gracias al shadow DOM
La Output Console — la ventana de desarrollador que captura los logs de la página — tenía un límite de hace tiempo: por encima de unos cientos de entradas el renderizado empezaba a arrastrarse. 700 entradas en la lista daban una ventana que se atascaba en cada actualización — ~5 segundos por re-render. En la v3.2.30 envolvimos la ventana en un shadow DOM — y además del aislamiento de estilos respecto a la página llegó una mejora de velocidad inesperada y enorme. Las mismas 700 entradas ahora se renderizan en ~100 milisegundos. Cincuenta veces más rápido.
De dónde venía la lentitud
La Output Console solía estar en el árbol DOM de la página como un elemento normal. Cada nueva entrada obligaba al navegador a recalcular los estilos de cada elemento del árbol — porque el CSS de la página podía teóricamente afectar a uno de ellos. Recalc de estilos sobre 700+ elementos, más 500+ páginas de CSS de fondo, más una ventana que tenía que re-renderizarse con cada nuevo log — todo eso sumaba un lag visible.
Coste extra: algunos servicios (Google Workspace, Notion, intranets corporativas) envían miles de reglas CSS en la hoja de estilos de la página. Cada nueva línea en la Output Console disparaba una búsqueda de coincidencia sobre miles de selectores — ¿alguno de ellos nos afecta?
Qué hizo el shadow DOM
Renderizar la ventana como shadow root le dice al navegador: los estilos de la página no se aplican a este subárbol. En cada nueva entrada el navegador se salta la búsqueda de coincidencia de selectores. El style recalc solo se aplica a los estilos dentro del shadow root — unas pocas decenas de líneas del CSS propio de la Output Console en lugar de miles de líneas de la página.
El efecto: el profiler mostró que el 87% del tiempo de renderizado pre-shadow DOM se gastaba en RecalculateStyle para los nodos de la Output Console. Tras la migración ese coste casi desapareció.
Cómo lo medimos
Repro: una página con la Output Console activa + 700 entradas previas (Network, Console, dataLayer). Pestaña Performance de DevTools, acción: JUSTZIX.log('test ' + i) en un bucle 100×.
- Antes de v3.2.30 (light DOM): 100 nuevas entradas = ~5000 ms de tiempo de renderizado principal.
- Después de v3.2.30 (shadow DOM): 100 nuevas entradas = ~100 ms.
El multiplicador real dependía de la página — en una mínima (about:blank) solo 5×, en un Google Workspace de producción más cerca de 60×. "50×" es la mediana aproximada — por eso la usamos en el titular.
Qué cambia en el flujo de trabajo
Tres situaciones concretas en las que importa:
- Depuración de larga duración — dejas la Output Console en pantalla durante horas con actividad normal de la página de fondo (autosaves, polling, eventos GTM). Antes la ventana se volvía pesada al rato; ahora se mantiene reactiva.
- Tormenta de red — análisis del waterfall de una página que dispara ~100 peticiones por segundo (p. ej. scroll infinito con lazy-load). Antes la ventana iba medio segundo por detrás del tráfico real; ahora va a la par.
- Espía del dataLayer — las páginas con un GTM muy activo (e-commerce, dashboards CRM) empujan 5–10 eventos por segundo. La lista de "nuevos pushes" crece rápido — ahora puedes desplazarte por ella en tiempo real.
¿Afecta esto a otras ventanas?
La Output Console fue la primera ventana migrada al shadow DOM (v3.2.30). El mismo patrón pasó luego al AI Helper (v3.2.76, ver el post separado). Las ventanas de desarrollador restantes — panel CSS, panel JS, consola JS — siguen viviendo en el light DOM. Cada una de ellas tiene muchos menos nodos (panel CSS = un textarea + una cabecera, panel JS similar), así que no sufren el mismo impacto en rendimiento. Su migración está planeada como extensión natural del aislamiento.
Ver también
- Output Console — descripción completa de la ventana y sus pestañas
- El AI Helper en un shadow DOM — el segundo paso del aislamiento de ventanas
- Ventanas en la página — cada ventana de desarrollador que trae la extensión
Instala JustZix — y ten una Output Console que sigue el ritmo del tráfico de la página.
Valora este artículo
Sin valoraciones — sé el primero.