Beschreiben Sie die Abfolge der Aktionen des Browsers (und nicht nur des Browsers) nach Eingabe der URL und Anforderung der Seite. Was ist ein Forced Layout?

После ввода URL и нажатия Enter браузер выполняет следующие шаги:

1. Разбор URL — выделяет протокол, домен, путь, параметры.
2. DNS-запрос — преобразует доменное имя в IP-адрес.
3. Установка TCP-соединения (и TLS, если HTTPS).
4. Отправка HTTP-запроса на сервер.
5. Получение HTTP-ответа с кодом состояния, заголовками и телом.
6. Парсинг HTML — браузер строит DOM-дерево.
7. Загрузка ресурсов — CSS, JS, изображения, шрифты и др.
8. Парсинг CSS — строится CSSOM (CSS Object Model).
9. Построение Render Tree — объединение DOM и CSSOM.
10. Layout (Reflow) — вычисление размеров и позиций элементов.
11. Paint — отрисовка пикселей на экране.
12. Выполнение JavaScript — может изменять DOM/CSSOM, вызывая повторные Layout и Paint.

Forced layout (принудительный layout) — это ситуация, когда браузеру приходится немедленно пересчитывать расположение элементов (layout), обычно из-за обращения к свойствам, требующим актуальных размеров (например, offsetWidth, clientHeight). Это блокирует поток выполнения и снижает производительность, так как браузер вынужден прервать текущие операции и выполнить перерасчет стилей и расположения элементов.

Избегать forced layout можно, минимизируя чтение свойств, вызывающих reflow, и группируя изменения DOM и стилей.