Что происходит после получения ответа от бэкенда и как браузер обрабатывает HTML?
Что проверяют
Знаете ли вы этапы отрисовки и понимаете ли, что блокирует показ страницы.
Как отвечать
По шагам.
1. Разбор разметки. Браузер читает поток байтов и по мере поступления строит дерево документа. Ждать полной загрузки файла он не будет: разбор идёт потоково.
2. Разбор стилей в отдельное дерево правил.
3. Дерево отрисовки. Дерево документа объединяется со стилями, из него исключается всё, что не отображается.
4. Раскладка. Вычисляются размеры и положение каждого элемента.
5. Отрисовка. Формируются команды рисования.
6. Композиция. Слои собираются в итоговое изображение, часто с участием видеокарты.
Что блокирует и потому важно на практике:
- синхронный скрипт останавливает разбор разметки. Браузер не знает, не изменит ли скрипт документ, поэтому ждёт загрузки и выполнения. Отсюда атрибуты отложенного и асинхронного выполнения: первый откладывает до конца разбора с сохранением порядка, второй выполняет сразу по готовности;
- стили блокируют отрисовку. Показать содержимое без стилей означало бы вспышку неоформленного текста, поэтому браузер ждёт. Из этого растёт приём с выделением критических стилей;
- шрифты могут скрывать текст до загрузки, если не задано поведение при загрузке.
Полезная деталь: параллельно работает предварительный сканировщик, который забегает вперёд по разметке и начинает загружать найденные ресурсы, даже пока основной разбор заблокирован скриптом.
События по завершении: одно срабатывает, когда документ разобран и отложенные скрипты выполнены, второе когда загрузились все ресурсы, включая изображения.
Дальше любое изменение стилей или содержимого вызывает повторную раскладку и отрисовку, поэтому анимируют преобразование и прозрачность: они обрабатываются на этапе композиции и предыдущие шаги не запускают.
Где спотыкаются
Считают, что разбор ждёт полной загрузки файла.
Не знают, чем отличаются отложенное и асинхронное выполнение скрипта.
Не понимают, почему стили задерживают показ страницы.
Анимируют геометрию и получают пересчёт раскладки на каждом кадре.