Разница между атрибутами async и defer в теге script заключается в том, когда выполняются скрипты: 4
- Атрибут async указывает браузеру загружать скрипт асинхронно, то есть параллельно с разбором HTML-документа. 4 Скрипты с этим атрибутом выполняются сразу после загрузки, без учёта порядка появления на странице или завершения разбора HTML. 4
- Атрибут defer указывает браузеру отложить выполнение скрипта до тех пор, пока не будет завершён разбор HTML-документа. 4 Это позволяет браузеру продолжать отображать содержимое страницы без задержек из-за ожидания скрипта. 4 Скрипты с этим атрибутом сохраняют порядок своего появления на странице и выполняются перед событием DOMContentLoaded. 4
На практике defer используется для скриптов, которым требуется доступ ко всему DOM и/или важен их относительный порядок выполнения. 2 Атрибут async подходит для независимых скриптов, например счётчиков и рекламы, относительный порядок выполнения которых не играет роли. 2