async и defer
По умолчанию <script> останавливает парсинг HTML на время загрузки и выполнения.
Сравнение
| Без атрибутов | defer | async | |
|---|---|---|---|
| Загрузка | Блокирует | Параллельно | Параллельно |
| Выполнение | Сразу | После парсинга HTML | Как только загрузился |
| Порядок скриптов | Гарантирован | Гарантирован | Не гарантирован |
Когда что использовать
<!-- defer - для скриптов, которым нужен DOM -->
<script defer src="app.js"></script>
<!-- async - для независимых скриптов (аналитика, реклама) -->
<script async src="analytics.js"></script>
<!-- type="module" - всегда defer по умолчанию -->
<script type="module" src="main.js"></script>
Размещайте <script defer> в <head> - загрузка начинается раньше, чем если ставить перед </body>.
Не используйте async для скриптов, зависящих друг от друга (порядок не гарантирован).