Files
huncode f6afaff958
Build and deploy / deploy (push) Successful in 15s
revise March 2022 browser rendering articles
2026-07-31 13:39:49 +03:00

13 KiB
Raw Permalink Blame History

П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:

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:

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.

Выполнено:

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 года удалены.

Выполнено:

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 выполнены:

xmllint --noout <each-svg>
rg -n '<script|<foreignObject|(?:href|src)="https?://|data:image' <each-svg>

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 года. Её статус и дата названы без повышения до 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 принята и интегрирована после трёх независимых проходов. В публикацию попадают только пять файлов партии и два точечных файла интеграции; материалы следующих месяцев и несвязанные файлы рабочего дерева не включаются.