Чем отличаются async и defer при подключении скриптов?

Question

async и defer позволяют загружать скрипты без блокировки HTML, но ведут себя по-разному. async выполняет скрипт сразу после загрузки, независимо от состояния DOM. defer выполняет скрипт только после завершения парсинга HTML. Также defer сохраняет порядок выполнения скриптов, а async — нет.

YeaHub · Accepted Answer

Оба атрибута используются для оптимизации загрузки JavaScript, но подходят для разных задач.Основное различиеasync ориентирован на независимые скрипты, а defer — на скрипты, работающие с DOM.Поведение asyncСкрипт загружается параллельно HTMLВыполняется сразу после загрузкиМожет выполниться до завершения построения DOMНе гарантирует порядок выполненияПоведение deferСкрипт загружается параллельно HTMLВыполняется после завершения парсинга HTMLDOM полностью доступенПорядок выполнения сохраняетсяПример использования vendor.js выполнится перед app.js, даже если загрузится позже.Практические рекомендацииasync — аналитика, трекеры, независимые скриптыdefer — основной код приложения, работа с DOMВыводВыбор между async и defer зависит от того, нужен ли доступ к DOM и важен ли порядок выполнения скриптов.