# Пятьдесят карточек на одном холсте: куда уходил процессор, и карточка «Команда» > Как NeuroSquad снизил нагрузку простаивающего холста на процессор со ~100% до ~15%: замеренные причины, пул WebGL-контекстов, семантический зум и новая карточка «Команда». - URL: https://neurosquad.ai/ru/blog/fifty-cards-one-canvas/ - Published: 2026-09-24 - Publisher: NeuroSquad (https://neurosquad.ai/) NeuroSquad 0.1.117 — выпуск, который замечаешь в основном по тому, что прекратилось: вентилятор, разгоняющийся, когда ничего не происходит, рывки при перетаскивании рамки, полной карточек, подвисание каждый раз, когда отдаляешь холст за порог, после которого карточки становятся плитками. А ещё в нём появилась карточка «Команда» — одна доска, где видно, чем занят каждый агент воркспейса. Цель для холста не менялась с первых недель: до пятидесяти живых карточек — терминалов, браузеров, агентов — с плавными паном, зумом, перетаскиванием и изменением размера. Правило, как к ней идти, тоже не менялось: сначала замерить. Каждое число в этой записи получено на отдельном экземпляре приложения со свежим профилем, которым управляли настоящими событиями ввода через протокол DevTools. ## Первый раунд: пятьдесят терминалов Первый проход случился ещё до публичного выпуска — на воркспейсе из пятидесяти карточек, где двенадцать терминалов печатали с максимальной скоростью. Зум тормозил по причине, которую легко пропустить: шапка каждой карточки держит постоянный экранный размер, и делала она это через `width` и `margin`. Это свойства раскладки. Каждый кадр зума менял размер каждой шапки, та меняла размер тела карточки, а оно дёргало `ResizeObserver` каждого терминала — пятьдесят подгонок терминала, пятьдесят сообщений в главный процесс, пятьдесят ресайзов консоли. На каждый кадр. Исправление: фиксировать значение зума один раз за жест, а не на каждом кадре, менять размер терминала, только когда реально меняется его сетка из колонок и строк, и на время движения зума подменять живые сетки терминалов статичной заглушкой. Затем терминалы перешли с DOM-рендерера xterm на WebGL-рендерер — и именно туда уходила большая часть времени: медиана кадра зума упала с 18,2 до 6,1 мс, p95 — со 133 до 12 мс. > **Chromium держит ровно 16 WebGL-контекстов на процесс** Мы это измерили, а не предположили. С WebGL на всех пятидесяти терминалах за секунду получалось «live: 16, lost: 34» — причём выживали шестнадцать смонтированных первыми, а не те, на которые вы смотрите. Поэтому терминалы получают контексты из пула на пятнадцать: их выдают тем, что на экране, и забирают у тех, что с него ушли. Один замер того раунда определил правило, которое до сих пор живёт в коде. Заглушки вместо терминалов вдвое ускорили зум (медиана 6,1 против 12,0 мс) и замедлили пан (в среднем 19,8 против 16,3 мс): пан просто сдвигает уже нарисованные слои, и спрятать пятьдесят сеток, а потом вернуть их, стоит дороже, чем даёт. Поэтому заглушки появляются, только когда жест действительно меняет зум. ## Второй раунд: холст в простое Второй раунд начался с более странной жалобы: холст тяжёлый, даже когда *ничего* не происходит. Четыре параллельных ревью кода и одна сессия живого профилирования на воркспейсе «Launch day» нашли не одну причину, а кучу мелких постоянных трат. Самой крупной оказался мультяшный персонаж. У карточек ИИ-агентов есть маленький маскот, который показывает состояние агента. Его анимации ожидания были бесконечными CSS-анимациями на дочерних элементах SVG — а их браузер перерисовывает в главном потоке, каждый кадр, вечно. С тремя карточками Claude Code на холсте при зуме 60% процесс рендерера занимал 98–104% ядра, а GPU — 32–36%, ничего при этом не делая. Теперь зациклено только состояние «работает», и двигается в нём HTML-обёртка, с которой композитор справляется сам; остальные состояния проигрываются несколько раз и замирают в позе, которая сама говорит, что происходит. - **~100% → 15%** — процессор рендерера, холст в простое с тремя карточками агентов - **~34% → 3%** — GPU на том же холсте - **180 → 66** — композитных слоёв после одного CSS-правила Остальное — список вещей, каждая из которых стоила немного, но все работали постоянно: - **Селекторы с `*` и `:has()` внутри холста.** Переключение класса на панели холста каждый раз стоило 25–34 мс пересчёта стилей: правила вроде «каждый потомок жеста» приходилось заново сопоставлять с каждым узлом каждой карточки. Явный список элементов, которые действительно анимируются, свёл это примерно к 1,5 мс. - **CSS-переменная на панели.** Уровень зума жил в кастомном свойстве на элементе, который содержит все карточки, и его изменение инвалидировало стили всего поддерева, терминалы включительно, — 22–34 мс на запись. Теперь это одно правило в теге `