Output Console — 50× plus rapide grâce au shadow DOM
L’Output Console — la fenêtre développeur qui capte les logs de la page — avait une limite ancienne : au-delà de quelques centaines d’entrées, le rendu se mettait à traîner. 700 entrées dans la liste donnaient une fenêtre qui se figeait à chaque mise à jour — ~5 secondes par re-render. En v3.2.30, nous avons enveloppé la fenêtre dans un shadow DOM — et en plus de l’isolation des styles vis-à-vis de la page est venu un gain de vitesse énorme et inattendu. Les mêmes 700 entrées s’affichent désormais en ~100 millisecondes. Cinquante fois plus vite.
D’où venait la lenteur
L’Output Console se trouvait auparavant dans l’arbre DOM de la page comme un élément ordinaire. Chaque nouvelle entrée forçait le navigateur à recalculer les styles pour chaque élément de l’arbre — parce que le CSS de la page pouvait théoriquement en affecter l’un d’eux. Le style recalc sur 700+ éléments, plus 500+ pages de CSS en arrière-plan, plus une fenêtre devant se re-render à chaque nouveau log — tout cela s’additionnait en un lag visible.
Coût supplémentaire : certains services (Google Workspace, Notion, intranets d’entreprise) embarquent des milliers de règles CSS dans la feuille de style de la page. Chaque nouvelle ligne dans l’Output Console déclenchait une recherche de correspondance sur des milliers de sélecteurs — l’un d’eux nous affecte-t-il ?
Ce que le shadow DOM a changé
Afficher la fenêtre comme une shadow root dit au navigateur : les styles de la page ne s’appliquent pas à ce sous-arbre. À chaque nouvelle entrée, le navigateur saute la recherche de correspondance des sélecteurs. Le style recalc ne s’applique qu’aux styles à l’intérieur de la shadow root — quelques dizaines de lignes du CSS propre de l’Output Console au lieu de milliers de lignes de la page.
L’effet : le profiler a montré que 87 % du temps de rendu pré-shadow-DOM était gaspillé en RecalculateStyle pour les nœuds de l’Output Console. Après la migration, ce coût a quasiment disparu.
Comment nous l’avons mesuré
Repro : une page avec l’Output Console active + 700 entrées préalables (Network, Console, dataLayer). Onglet Performance des DevTools, action : JUSTZIX.log('test ' + i) dans une boucle 100×.
- Avant v3.2.30 (light DOM) : 100 nouvelles entrées = ~5000 ms de temps de rendu principal.
- Après v3.2.30 (shadow DOM) : 100 nouvelles entrées = ~100 ms.
Le multiplicateur réel dépendait de la page — sur une page minimale (about:blank) seulement 5×, sur un Google Workspace en production plus proche de 60×. « 50× » est la médiane approximative — c’est pourquoi nous l’utilisons dans le titre.
Ce que cela change dans le workflow
Trois situations concrètes où cela compte :
- Débogage de longue durée — vous laissez l’Output Console à l’écran pendant des heures avec une activité normale de la page en arrière-plan (autosaves, polling, événements GTM). Avant, la fenêtre devenait poussive au bout d’un moment ; maintenant, elle reste réactive.
- Tempête réseau — analyse du waterfall d’une page qui tire ~100 requêtes par seconde (par ex. scroll infini avec lazy-load). Avant, la fenêtre avait une demi-seconde de retard sur le trafic réel ; maintenant, elle suit.
- Espion de dataLayer — les pages avec un GTM très actif (e-commerce, dashboards CRM) poussent 5–10 événements par seconde. La liste des « nouveaux pushs » grandit vite — vous pouvez désormais la faire défiler en temps réel.
Cela affecte-t-il les autres fenêtres
L’Output Console a été la première fenêtre migrée vers le shadow DOM (v3.2.30). Le même schéma a ensuite été appliqué à l’AI Helper (v3.2.76, voir le billet séparé). Les autres fenêtres développeur — panneau CSS, panneau JS, console JS — vivent encore dans le light DOM. Chacune d’elles a bien moins de nœuds (panneau CSS = un textarea + un en-tête, panneau JS de même), elles ne subissent donc pas le même impact sur les performances. Leur migration est prévue comme une extension naturelle de l’isolation.
Voir aussi
- Output Console — description complète de la fenêtre et de ses onglets
- L’AI Helper dans un shadow DOM — la deuxième étape de l’isolation des fenêtres
- Fenêtres sur la page — chaque fenêtre développeur fournie par l’extension
Installez JustZix — et bénéficiez d’une Output Console qui suit le trafic de la page.
Notez cet article
Aucune note — soyez le premier.