# П49 — browser rendering, март 2022: self-review sidecar-пакета ## Граница пакета Созданы только пять новых файлов, без изменения registry, README, `articles.json`, редакционного стандарта, очереди, Git и файлов других пакетов: 1. `web/scripts/upgrade-2022-03.mjs`; 2. `web/public/assets/editorial/2022/browser-rendering-timeline-2022.svg`; 3. `web/public/assets/editorial/2022/browser-rendering-pipeline-2022.svg`; 4. `web/public/assets/editorial/2022/browser-rendering-diagnosis-rollback-2022.svg`; 5. этот review. Скрипт экспортирует только `revisions`. В каждом overlay-объекте есть только поля публикации; `date` и `author` отсутствуют. `--print-revisions` печатает тот же import-safe массив, а `--verify-fixture` запускает локальную модель. ## Историческая рамка и источники Материал ограничен мартом 2022 года. Проверены три первичных или официальных источника с датированным либо неизменяемым URL: - [WHATWG HTML, immutable commit 9d42d2c от 27 февраля 2022 года](https://github.com/whatwg/html/commit/9d42d2ca8523758893cdc8d7de6e0815e4178b81); - [W3C Timing control for script-based animations, Working Group Note от 22 сентября 2015 года](https://www.w3.org/TR/2015/NOTE-animation-timing-20150922/); - [W3C Performance Timeline Level 2, Working Draft от 19 августа 2021 года](https://www.w3.org/TR/2021/WD-performance-timeline-2-20210819/). HTTP preflight всех трёх URL завершился `200`. Из источников взяты только узкие факты: rendering обновляется user agent, `requestAnimationFrame` запрашивает планирование animation frame update, а Performance Timeline описывает работу с performance entries. Они не устанавливают единственный browser pipeline, не задают labels fixture и не дают числовой бюджет. В статьях нет INP, поздних интерфейсных возможностей DevTools, современных рекомендаций по Web Vitals или утверждений о production-метриках. ## Проход 1 — факты и техника Проверял: границу между документированным поведением, реальной записью Performance panel и учебной моделью. `planRenderFrame` и `runBrowserRenderingFixture` используют только локальные object/array. В них нет DOM, browser API, `requestAnimationFrame`, сети, таймера, файлов, CPU profile, trace или Web Vitals. Значения `units` всегда названы `synthetic-work-units`; это не milliseconds, duration, FPS, CPU или результат настоящего кадра. Fixture формирует один валидный DOM contract: ```text save-card.className: card is-pending -> card is-ready ``` Для changed route она создаёт фиксированный порядок `js-mutation → style → layout → paint → composite`, total `11 synthetic units` и условную `jank-boundary` при limit `10`. Это не диагноз jank пользователя, а детерминированная тестовая ветка. Error route отвергает неизвестное property или неверный contract; no-op route не создаёт frame; rollback возвращает исходный DOM отдельным frame. Выполнено: ```text node --check web/scripts/upgrade-2022-03.mjs node web/scripts/upgrade-2022-03.mjs --verify-fixture ``` Результат: **16/16 assertions**. Assertions покрывают: валидный target/property/from/to, новый DOM result, сохранение text, stable frame id, точный порядок всех стадий, названные причины стадий, явную synthetic unit, детерминированную сумму, условную boundary без претензии на duration, no-op без frame/mutation, error без mutation, rollback к base DOM и отдельный rollback frame с тем же порядком стадий. Все code snippets соответствуют реальным полям и режимам script. Пример с rollback прямо объясняет, что это не browser undo, а проектный проверяемый контракт. Пример diagnosis не выдаёт labels модели за event names Performance panel. ## Проход 2 — редактура, голос и объём Проверял: М5 начала 2022 года — системный практик, который связывает пользовательское действие, границу системы и проверяемый следующий шаг, но не приписывает себе инцидент, платформенный масштаб или неизмеренный эффект. | Slug | Основной текст, знаки | Роль | Каркас | Вердикт | | --- | ---: | --- | --- | --- | | `editorial-2022-03-practice-browser-rendering` | 7 655 | Практический маршрут | проблема/цена, таблица, fixture, timeline, маршрут, ограничения | Принято | | `editorial-2022-03-mechanism-browser-rendering` | 9 514 | Причинная модель | проблема/цена, таблица, pipeline, error/no-op, rollback | Принято | | `editorial-2022-03-field-browser-rendering` | 9 313 | Полевой разбор | проблема/цена, полевой лист, diagnosis, rollback, следующий шаг | Принято | Во всех статьях проблема и цена находятся в первых двух абзацах. Техническая речь выдерживает маршрут «симптом → причина → проверка → действие»; общие фразы заменены на target, property, before/after, owner, range и rollback. Тексты не утверждают «CSS всегда дорогой», «class всегда вызывает layout» или «страница стала быстрее». Термины `style`, `layout`, `paint` и `composite` после первого появления ограничены учебными labels и вопросом к настоящей записи. Анахронизмы после марта 2022 года удалены. Выполнено: ```text npm --prefix web run audit:draft -- scripts/upgrade-2022-03.mjs ``` Результат: все три статьи прошли диапазон 5 000–15 000, проблему в начале, таблицу, figure с alt/подписью, код, ordered route, минимум два источника и проверку import-safe overlay. ## Проход 3 — визуал и выпуск sidecar Проверял: самостоятельность трёх иллюстраций, читаемость на ширине 375 px, SVG safety и границы выпуска sidecar. - `browser-rendering-timeline-2022.svg` отвечает на вопрос «какой порядок и где условная boundary?»; в нём labels и units не маскируются под duration. - `browser-rendering-pipeline-2022.svg` отвечает на вопрос «какой вопрос относится к каждой стадии?»; пунктирная рамка отделяет модель от event names браузера. - `browser-rendering-diagnosis-rollback-2022.svg` отвечает на вопрос «когда остановиться и как проверить обратимость?»; он различает error, no-op, boundary и rollback. Для всех SVG выполнены: ```text xmllint --noout rg -n ' ``` XML проверка прошла. Safety scan не нашёл script, foreignObject, внешних URL или `data:image`. В каждом SVG есть `title`, `desc`, `role="img"`; в статьях есть отдельные развёрнутые `alt` и `figcaption`. Рендеры Sharp шириной 375 px просмотрены: крупные заголовки, связи и предупреждения читаются, текст не обрезан, а три схемы не повторяют один вопрос. Production build, registry integration, изменение базы статей, публикация и push намеренно не выполнялись: они лежат за границей автономного пакета. ## Вердикт Sidecar-пакет П49 готов к независимому редакторскому приёму. Перед интеграцией нужен отдельный проход: повторно проверить исторические ссылки, добавить импорт и spread в registry, обновить счётчик архива, запустить targeted audit и production build. Эти файлы намеренно не изменены здесь. ## Независимый редакторский приём ### Проход 1 — источники и модель До интеграции выявлена фактическая ошибка: исходный URL объявлял документ W3C Recommendation от 6 октября 2015 года, но отвечал `404`. Он удалён из текста, кода и review. Вместо него поставлена проверяемая [W3C Working Group Note от 22 сентября 2015 года](https://www.w3.org/TR/2015/NOTE-animation-timing-20150922/). Её статус и дата названы без повышения до Recommendation. Повторный HTTP preflight этого URL, immutable WHATWG commit и датированного Performance Timeline draft завершился `200`. Затем вручную просмотрена локальная fixture. `planRenderFrame` принимает только declared DOM-contract, не обращается к DOM или browser API и маркирует все five stages как `synthetic-work-units`. Граница `10` не названа временем кадра или dropped-frame наблюдением. CLI подтвердил 16 из 16 assertions; import вернул ровно три revision-объекта без `date` и `author`. ### Проход 2 — текст и полнота Перепроверены первые абзацы, связи «симптом → причина → проверка → действие», rollback и исторические ограничения. Убрана смешанная фраза `later change`: она заменена на «следующая правка». Строгий целевой аудит после интеграции подтвердил 7 655 / 9 514 / 9 313 знаков, по одной figure и таблице в каждой статье, а также 1 / 2 / 2 исполнимых code examples соответственно. Ни один материал не выдаёт учебные labels за события Performance panel либо за результат реального trace. ### Проход 3 — визуал и выпуск Все три SVG повторно прошли `xmllint`; safety scan не нашёл script, `foreignObject`, внешних URL или `data:image`. Рендеры Sharp шириной 375 px просмотрены отдельно: timeline объясняет условную границу, pipeline отделяет вопросы модели от имён browser events, diagnosis показывает остановки и rollback. После добавления мартовского import/spread registry содержит 142 ревизии. `npm run build` завершён успешно: сгенерировано 374 статические страницы. ## Финальный вердикт П49 принята и интегрирована после трёх независимых проходов. В публикацию попадают только пять файлов партии и два точечных файла интеграции; материалы следующих месяцев и несвязанные файлы рабочего дерева не включаются.