Почему некоторые скрипты должны выполняться раньше загрузки HTML-контента?

Некоторые скрипты должны выполняться раньше загрузки HTML-контента, например, для оптимизации производительности сайта. tokmakov.msk.ru learn.javascript.ru

Когда браузер загружает HTML и доходит до тега <script>, он не может продолжать строить DOM, пока не выполнит скрипт. tokmakov.msk.ru Это ведёт к двум проблемам: tokmakov.msk.ru

• Скрипты не видят DOM-элементы ниже себя, поэтому к ним нельзя добавить обработчики. tokmakov.msk.ru
• Если вверху страницы объёмный скрипт, он «блокирует» страницу на время загрузки и выполнения. tokmakov.msk.ru

Например, если подключается внешний скрипт, который показывает рекламу или вставляет счётчик посещений, то задержка в отображении оставшейся части страницы может быть опасной. learn.javascript.ru

Чтобы решить эту проблему, используют атрибуты async и defer тега <script>: tokmakov.msk.ru learn.javascript.ru

• Атрибут async позволяет браузеру одновременно с парсингом HTML загружать скрипт и выполнять его, как только загрузка завершится. sky.pro Содержимое страницы отображается сразу же — async его не блокирует. tokmakov.msk.ru
• Атрибут defer сообщает браузеру загружать скрипт в фоновом режиме, не останавливая парсинг HTML, и отложить выполнение скрипта до окончания парсинга. sky.pro Скрипт с атрибутом defer всегда выполняется, когда дерево DOM готово, но до события DOMContentLoaded. tokmakov.msk.ru