Senior
HTML tarayıcıya ne zaman girer? Bloklayıcı varlıklar nelerdir ve bunlarla nasıl çalışılır?
sobes.tech yapay zeka
AI'dan gelen yanıt
Когда браузер получает 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>
Таким образом, оптимизация загрузки ресурсов помогает уменьшить время блокировки и ускорить отображение страницы.