Разница между атрибутами defer и async при подключении скриптов заключается в том, когда они выполняют скрипты: 2

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

Некоторые ситуации, в которых используют каждый из атрибутов:

• Async применяют для скриптов, которые не требуют немедленного выполнения, не влияют на отображение страницы и не зависят от других скриптов. 2 Например, для счётчиков, рекламных кодов, чатов поддержки аналитики. 3
• Defer используют, когда скрипт зависит от других частей страницы (например, взаимодействует с DOM) и должен быть выполнен только после того, как страница будет полностью загружена. 4 Это гарантирует, что скрипт выполнится в правильном порядке. 4

Нельзя использовать оба атрибута в одном файле. 2 Если указать оба атрибута для одного скрипта, то будет применяться только атрибут async. 2