Вёрстка: Атрибуты async и defer для тега script

Атрибуты async и defer используются для управления загрузкой и выполнением скриптов.

Атрибут async указывает браузеру, что скрипт должен быть загружен асинхронно, то есть параллельно с загрузкой HTML-документа. Как только скрипт будет загружен, он будет выполнен немедленно. Это означает, что выполнение скрипта может произойти до того, как HTML-документ будет полностью загружен и обработан.

Атрибут async лучше всего использовать для скриптов, которые не зависят от других скриптов и не изменяют DOM до его полной загрузки. Примеры таких скриптов включают аналитику и рекламу, которые могут выполняться независимо от остальной части страницы.

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

Атрибут defer указывает браузеру, что скрипт должен быть загружен асинхронно, но выполнен только после полной загрузки и обработки HTML-документа. В отличие от async, скрипты с атрибутом defer будут выполняться в том порядке, в котором они указаны в HTML, после завершения загрузки документа.

Атрибут defer полезен для скриптов, которые зависят от DOM или других скриптов, и должны выполняться только после полной загрузки страницы. Это включает в себя такие скрипты, как библиотеки JavaScript или любые другие скрипты, которые взаимодействуют с элементами DOM.

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

Сравнение async и defer