Все ли скрипты блокируют парсинг HTML?

Как скрипты влияют на парсинг HTML

Когда браузер встречает тег <script> без атрибутов, он останавливает парсинг HTML, загружает скрипт, выполняет его, и только потом продолжает разбор документа. Это может замедлить отображение страницы, особенно если скрипт тяжёлый или загружается с медленного сервера.

Атрибуты async и defer

Атрибут async позволяет загружать скрипт параллельно с парсингом HTML. Как только скрипт загружен, он выполняется, приостанавливая парсинг. Атрибут defer также загружает скрипт параллельно, но откладывает его выполнение до полного завершения парсинга документа. Оба атрибута не блокируют парсинг, но defer гарантирует порядок выполнения скриптов, а async — нет.

Пример кода

<!-- Блокирующий скрипт -->
<script src="script.js"></script>

<!-- Неблокирующий async -->
<script src="script.js" async></script>

<!-- Неблокирующий defer -->
<script src="script.js" defer></script>

Вывод

Используйте defer для скриптов, которые должны выполняться после полной загрузки DOM, и async для независимых скриптов, например, аналитики. Это улучшает производительность и пользовательский опыт.