54 lines
7.2 KiB
Markdown
54 lines
7.2 KiB
Markdown
# Июнь 2027 — техническая вычитка производительности
|
||
|
||
Тройка отвечает на разные вопросы: где начинается критический путь, какой ресурс действительно блокирует страницу и как повторить замер.
|
||
|
||
| Статья | Body без источников | Практический результат |
|
||
| --- | ---: | --- |
|
||
| <code>editorial-2027-06-practice-performance-capstone</code> | 5 632 | локальный сервер fast/slow и разделение TTFB/HTML |
|
||
| <code>editorial-2027-06-mechanism-performance-capstone</code> | 5 275 | чтение Resource Timing по инициатору и потребителю |
|
||
| <code>editorial-2027-06-field-performance-capstone</code> | 5 452 | локальная серия из 20 замеров, median и p95 |
|
||
|
||
## Проход 1 — факты, пример и источники
|
||
|
||
| Статья | До | После | Причина |
|
||
| --- | --- | --- | --- |
|
||
| Practice | Общая задержка страницы могла смешивать TTFB и визуальную готовность. | Добавлено различие TTFB, DOMContentLoaded, FCP и LCP; локальный сервер измеряет только HTTP-участок. | Не выдавать серверный замер за пользовательскую метрику. |
|
||
| Mechanism | Длинная полоса waterfall трактовалась как причина. | Добавлены <code>initiatorType</code>, потребитель ресурса и правило для отсутствующего <code>renderBlockingStatus</code>. | Время ресурса не доказывает, что экран его ждал. |
|
||
| Field | Среднее и p95 описывались без разделения режимов кэша. | Добавлена проверка cold/warm cache и сохранение сырых значений вместе с размером выборки. | Сделать сравнение условий воспроизводимым. |
|
||
|
||
Проверены первичные источники:
|
||
|
||
1. [W3C Navigation Timing Level 2](https://www.w3.org/TR/2026/WD-navigation-timing-2-20260225/), Working Draft, 25 February 2026. Использован для временных меток навигации. Граница: draft не задаёт пороги качества и не сообщает значения конкретного браузера.
|
||
2. [W3C Performance Timeline](https://www.w3.org/TR/2025/CRD-performance-timeline-20250521/), Candidate Recommendation Draft, 21 May 2025. Использован для <code>PerformanceEntry</code> и <code>PerformanceObserver</code>. Граница: документ не гарантирует одинаковую поддержку entry во всех движках.
|
||
3. [W3C Resource Timing](https://www.w3.org/TR/2026/CRD-resource-timing-20260420/), Candidate Recommendation Draft, 20 April 2026. Использован для времени и размеров ресурсов. Граница: кросс-доменные поля зависят от политики браузера и заголовков.
|
||
|
||
Все три датированные страницы отвечают HTTP 200. Черновой статус W3C назван в источнике и не превращён в факт о приложении.
|
||
|
||
## Проход 2 — структура, голос и плотность
|
||
|
||
| Статья | До | После | Причина |
|
||
| --- | --- | --- | --- |
|
||
| Practice | Текст мог читаться как список метрик. | В начале оставлен один вопрос — «какой участок задерживает экран» — и для каждого действия добавлена цена. | Сохранить техлидский компромисс вместо каталога терминов. |
|
||
| Mechanism | Waterfall, CSS и script были смешаны в одном объяснении. | Добавлены отдельные блоки про initiator, порядок <code>defer/async</code>, размер и зависимость. | Читатель видит механизм до рецепта. |
|
||
| Field | p95 появлялся раньше описания условий. | Протокол перенесён перед кодом: URL, commit, browser, cache, повторы, метрика. | Число получает вход и единицу измерения. |
|
||
|
||
Прагматичная речь проверена по формуле «симптом → измерение → изменение → ограничение». Общие оценки удалены; в тексте остались измеряемые участки, условия и ожидаемый результат.
|
||
|
||
## Проход 3 — визуал, доступность и повторы
|
||
|
||
| Статья | До | После | Причина |
|
||
| --- | --- | --- | --- |
|
||
| Practice | Схема не отделяла сервер от блокирующих ресурсов. | SVG стал временной линией TTFB → HTML → CSS/JS → Paint; alt повторяет эту границу. | Рисунок поддерживает ключевое различие статьи. |
|
||
| Mechanism | Визуал не показывал потребителя ресурса. | SVG-матрица получила колонки «ресурс, инициатор, время, ждёт, действие». | Сократить визуальное чтение waterfall до проверяемых полей. |
|
||
| Field | Цикл замера не показывал p95 и изменение одного фактора. | SVG показывает условия, повторы, p95 и возврат к одному фактору; подпись предупреждает о raw distribution. | Не сводить измерение к одной цифре. |
|
||
|
||
<code>xmllint --noout</code> и SVG safety scan прошли для трёх файлов. Sharp отрендерил <code>375×240</code>, <code>375×250</code>, <code>375×250</code>; подписи, таблицы и карточки читаются без горизонтального скролла. Все изображения имеют русские <code>title</code>, <code>desc</code>, HTML <code>alt</code> и <code>figcaption</code>.
|
||
|
||
## Итоговые проверки
|
||
|
||
- <code>node --check scripts/upgrade-2027-06.mjs</code> — PASS.
|
||
- <code>node scripts/upgrade-2027-06.mjs --verify-fixture</code> — PASS, <code>7/7</code>.
|
||
- <code>npm run audit:draft -- scripts/upgrade-2027-06.mjs</code> — PASS, 3/3 exact slugs.
|
||
- Три извлечённых примера запущены локально: серверный замер, browser timing snippet в Node-совместимой среде и p95 — <code>3/3</code>.
|
||
- Сквозное сравнение 349 материалов, 4 176 сравнений, sources исключены, code включён; совпадений — <code>0</code>.
|