Что происходит после получения сервером данных страницы?
Что проверяют
Знаете ли вы, что происходит между приходом ответа и первым кадром на экране, и понимаете ли, чем из этого управляет фронтенд. Формулировка размытая, поэтому первым делом уточните, про какую сторону речь: про сервер, который получил запрос, или про браузер, который получил данные страницы. Обычно имеют в виду второе.
Как отвечать
Разложите путь по шагам:
- браузер читает заголовки ответа, определяет тип содержимого и правила кэширования, при необходимости распаковывает тело;
- парсер строит DOM по мере прихода байтов, он не ждёт документ целиком;
- CSS собирается в CSSOM, и он блокирует отрисовку: без стилей рисовать нечего;
<script>безdeferиasyncостанавливает разбор, потому что скрипт может дописать документ;- из DOM и CSSOM собирается дерево рендера, дальше расчёт геометрии, отрисовка, композиция слоёв;
- шрифты, картинки и отложенные скрипты догружаются, и каждый может сдвинуть макет.
Если данные пришли не документом, а ответом API, шаги другие: разбор JSON, запись в состояние, повторный рендер поддерева, сверка с предыдущим деревом и точечное обновление DOM. Тут же скажите про ошибки: проверять response.ok, а не только ловить исключение.
Сильный ответ заканчивается тем, на что это влияет: на метрики загрузки и отзывчивости, а значит, на критические стили, preload шрифтов и отказ от синхронных скриптов в шапке.
Где спотыкаются
Говорят «пришёл ответ, и страница отрисовалась», пропуская, что отрисовка ждёт CSSOM. Потом не могут объяснить, почему подключённый в конце документа стиль даёт вспышку нестилизованного текста.
Путают async и defer. Оба не блокируют разбор, но async выполняется сразу по загрузке и в произвольном порядке, а defer строго по порядку после разбора документа. Скрипту, зависящему от DOM, годится только второй.
Считают, что fetch сам отвалится на ошибке сервера. Промис отклоняется только на сетевом сбое, ответ с кодом 500 спокойно доедет до обработчика, и без проверки статуса в состояние попадёт страница ошибки вместо данных.