189 lines
13 KiB
Markdown
189 lines
13 KiB
Markdown
# П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 <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 года](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 принята и интегрирована после трёх независимых проходов. В публикацию
|
||
попадают только пять файлов партии и два точечных файла интеграции; материалы
|
||
следующих месяцев и несвязанные файлы рабочего дерева не включаются.
|