Разница между <script>, <script async> и <script defer>?

В HTML тег <script> используется для встраивания или подключения внешних JavaScript-скриптов. Однако поведение скриптов зависит от атрибутов async и defer. Вот основные различия:

1. <script> (без атрибутов)

• Загрузка и выполнение: Скрипт загружается и выполняется сразу же, как только браузер его встретит в процессе чтения HTML. Это блокирует обработку остального HTML-кода до завершения загрузки и выполнения скрипта.
• Проблемы: Если скрипт долго загружается или выполняется, это может замедлить отрисовку страницы для пользователя.

Пример:

<script src="script.js"></script>

2. <script async>

• Загрузка: Скрипт загружается асинхронно (параллельно с загрузкой HTML-документа).
• Выполнение: Скрипт выполняется сразу после того, как загрузится, что может произойти до или после завершения загрузки HTML. Выполнение может прерывать процесс рендеринга.
• Использование: Подходит для скриптов, которые не зависят от структуры DOM или других скриптов (например, аналитика или реклама).

Пример:

<script async src="script.js"></script>

3. <script defer>

• Загрузка: Скрипт загружается асинхронно, как и с async.
• Выполнение: Скрипт выполняется только после того, как весь HTML-документ будет полностью загружен и разобран. Это позволяет избежать блокировки рендеринга и гарантирует, что скрипт будет выполнен в правильной последовательности (если на странице несколько таких скриптов).
• Использование: Подходит для скриптов, которые зависят от готового DOM (например, для работы с элементами на странице).

Пример:

<script defer src="script.js"></script>

Основные различия