Output Console — в 50× быстрее благодаря shadow DOM
Output Console — окно разработчика, которое ловит логи страницы — давно имело предел: выше нескольких сотен записей рендеринг начинал тормозить. 700 записей в списке давали окно, которое подвисало на каждом обновлении — ~5 секунд на каждый re-render. В v3.2.30 мы обернули окно в shadow DOM — и помимо изоляции стилей от страницы пришло неожиданное, огромное ускорение. Те же 700 записей теперь рендерятся за ~100 миллисекунд. В пятьдесят раз быстрее.
Откуда бралась медлительность
Output Console раньше сидел в DOM-дереве страницы как обычный элемент. Каждая новая запись заставляла браузер пересчитывать стили для каждого элемента дерева — потому что CSS страницы теоретически мог влиять на один из них. Style recalc для 700+ элементов плюс 500+ страниц CSS в фоне плюс окно, которое должно ре-рендериться при каждом новом логе — всё это складывалось в видимый лаг.
Дополнительная стоимость: некоторые сервисы (Google Workspace, Notion, корпоративные интранеты) поставляют тысячи CSS-правил в таблице стилей страницы. Каждая новая строка в Output Console запускала поиск совпадений по тысячам селекторов — затрагивает ли нас какой-то из них?
Что сделал shadow DOM
Рендеринг окна как shadow root говорит браузеру: стили страницы не применяются к этому поддереву. На каждой новой записи браузер пропускает поиск совпадений селекторов. Style recalc применяется только к стилям внутри shadow root — несколько десятков строк собственного CSS Output Console вместо тысяч строк страницы.
Эффект: профайлер показал, что 87% времени рендеринга до shadow DOM тратилось на RecalculateStyle для узлов Output Console. После миграции этой стоимости почти нет.
Как мы это измеряли
Repro: страница с активным Output Console + 700 предыдущих записей (Network, Console, dataLayer). Вкладка Performance в DevTools, действие: JUSTZIX.log('test ' + i) в цикле 100×.
- До v3.2.30 (light DOM): 100 новых записей = ~5000 мс основного времени рендеринга.
- После v3.2.30 (shadow DOM): 100 новых записей = ~100 мс.
Реальный множитель зависел от страницы — на минимальной (about:blank) всего 5×, на продакшен-Google Workspace ближе к 60×. «50×» — это приблизительная медиана — поэтому мы используем её в заголовке.
Что меняется в рабочем процессе
Три конкретные ситуации, где это важно:
- Длительная отладка — вы оставляете Output Console на экране часами при обычной активности страницы в фоне (автосейвы, polling, события GTM). Раньше окно через некоторое время становилось вялым; теперь оно остаётся отзывчивым.
- Сетевой шторм — анализ waterfall страницы, которая стреляет ~100 запросов в секунду (например, бесконечная прокрутка с lazy-load). Раньше окно отставало на полсекунды от реального трафика; теперь успевает.
- Шпион dataLayer — страницы с очень активным GTM (e-commerce, CRM-дашборды) пушат 5–10 событий в секунду. Список «новых push» растёт быстро — теперь вы можете прокручивать его в реальном времени.
Влияет ли это на другие окна
Output Console был первым окном, мигрированным в shadow DOM (v3.2.30). Тот же паттерн затем перешёл к AI Helper (v3.2.76, см. отдельный пост). Остальные окна разработчика — панель CSS, панель JS, JS-консоль — по-прежнему живут в light DOM. У каждого из них значительно меньше узлов (панель CSS = одна textarea + заголовок, панель JS аналогично), поэтому они не страдают от того же удара по производительности. Их миграция запланирована как естественное продолжение изоляции.
Смотрите также
- Output Console — полное описание окна и его вкладок
- AI Helper в shadow DOM — второй шаг изоляции окон
- Окна на странице — каждое окно разработчика, которое приносит расширение
Установите JustZix — и получите Output Console, которая поспевает за трафиком страницы.
Оцени эту статью
Оценок пока нет — оцени первым.