Обычно браузеры загружают script синхронно, во время разбора документа. Поэтому принято добавлять скрипты в конец документа, перед body, чтобы они не тормозили загрузку страницы. Но при помощи атрибутов defer и async можно явно управлять порядком загрузки и выполнения скриптов.
Атрибут async - Скрипт выполняется полностью асинхронно. Это означает, что файл будет выполняться без ожидания загрузки и отображения веб-страницы. При обнаружении script async src="..." браузер не останавливает обработку страницы, а спокойно работает дальше. Когда скрипт будет загружен он выполнится.
<script src="script1.js" async></script>Атрибут defer - Указывает браузеру что скрипт должен выполняться после разбора документа, но до события DOMContentLoaded.
Скрипты с атрибутом defer будут предотвращать запуск события DOMContentLoaded до тех пор, пока скрипт не загрузится полностью и не завершится его инициализация.
<script src="script1.js" defer></script>
<script src="script2.js" defer></script>
