Основное отличие типов загрузки скриптов async и defer заключается в том, когда они выполняют скрипты: 3

• Async. 3 Указывает браузеру загружать скрипт асинхронно, то есть параллельно с разбором HTML-документа. 3 Скрипты с этим атрибутом выполняются сразу после загрузки, без учёта порядка появления на странице или завершения разбора HTML. 3
• Defer. 3 Указывает браузеру отложить выполнение скрипта до тех пор, пока не будет завершён разбор HTML-документа. 3 Это позволяет браузеру продолжать отображать содержимое страницы без задержек из-за ожидания скрипта. 3 Скрипты с этим атрибутом сохраняют порядок своего появления на странице и выполняются перед событием DOMContentLoaded. 3

На практике defer используется для скриптов, которым требуется доступ ко всему DOM и/или важен их относительный порядок выполнения. 1 Async хорош для независимых скриптов, например счётчиков и рекламы, относительный порядок выполнения которых не играет роли. 1