Senior
Ce se întâmplă când HTML ajunge în browser? Care sunt entitățile blocante și cum să le gestionăm?
sobes.tech AI
Răspuns de la AI
Когда браузер получает HTML, он начинает парсить документ сверху вниз, строя DOM (Document Object Model) — дерево элементов страницы. Одновременно с этим браузер обнаруживает ресурсы, такие как CSS и JavaScript, и начинает их загружать.
Блокирующие сущности:
- CSS — браузер блокирует отображение страницы (rendering), пока не загрузит и не применит все CSS, чтобы избежать эффекта "мерцания" без стилей.
- JavaScript — если скрипт подключён без атрибута
asyncилиdefer, браузер приостанавливает парсинг HTML, загружает и выполняет скрипт, чтобы избежать проблем с зависимостями и изменениями DOM.
Как с этим работать:
- Использовать
deferдля скриптов, чтобы они загружались параллельно, но выполнялись после парсинга HTML. - Использовать
asyncдля независимых скриптов, которые могут выполняться сразу после загрузки. - Минимизировать и объединять CSS, чтобы ускорить загрузку.
- Критический CSS можно встроить в
<head>, а остальной загружать асинхронно.
Пример подключения скриптов:
<script src="script1.js" defer></script>
<script src="script2.js" async></script>
Таким образом, оптимизация загрузки ресурсов помогает уменьшить время блокировки и ускорить отображение страницы.