В чем разница между async и defer в JavaScript

Вопрос

В чем разница между async и defer в JavaScript

Профессия

Frontend Developer

Что хочет услышать интервьюер

Интервьюер хочет убедиться, что кандидат понимает разницу между атрибутами async и defer, их влияние на загрузку и выполнение скриптов, а также когда их использовать в реальных проектах.

Ключевые тезисы

• async позволяет скрипту выполняться асинхронно, как только он загрузится, не блокируя парсинг HTML.
• defer также загружает скрипт асинхронно, но его выполнение откладывается до полного парсинга HTML документа.
• Скрипты с async выполняются в порядке загрузки, а с defer — в порядке их объявления в документе.
• Использование defer гарантирует, что скрипты будут выполнены только после того, как весь DOM будет готов.
• async подходит для независимых скриптов, которые не зависят от DOM или других скриптов.

Подробный ответ

Атрибуты async и defer используются для оптимизации загрузки и выполнения JavaScript-кода на веб-страницах. Оба атрибута позволяют браузеру продолжать парсинг HTML, не блокируя его во время загрузки скрипта. Однако между ними есть ключевые различия. Атрибут async указывает браузеру загружать и выполнять скрипт асинхронно, как только он будет загружен, не дожидаясь полного парсинга HTML. Это полезно для скриптов, которые не зависят от других скриптов или DOM, например, для аналитики или рекламных скриптов. С другой стороны, атрибут defer также загружает скрипт асинхронно, но его выполнение откладывается до полного парсинга HTML документа. Это гарантирует, что DOM будет готов до выполнения скрипта, что важно для скриптов, взаимодействующих с DOM или зависящих от других скриптов. Порядок выполнения скриптов также отличается: async выполняет скрипты в порядке их загрузки, а defer — в порядке их объявления в документе.

Практические примеры

Пример 1

Пример использования async: <script async src="analytics.js"></script>. Этот скрипт загрузится и выполнится как только будет готов, не дожидаясь завершения парсинга HTML.

Пример 2

Пример использования defer: <script defer src="main.js"></script>. Этот скрипт будет выполнен только после того, как весь HTML документ будет полностью загружен и разобран.

Пример 3

Пример одновременного использования async и defer: <script async defer src="script.js"></script>. В этом случае браузер будет использовать async, а defer будет проигнорирован.

Частые ошибки

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

Связанные темы

• DOM (Document Object Model) — дерево объектов, представляющих структуру HTML документа.
• Асинхронность в JavaScript — концепция выполнения кода без блокировки основного потока.
• Оптимизация загрузки страниц — методы улучшения производительности веб-приложений.

Follow-up вопросы

Когда лучше использовать async, а когда defer?

Уровень: basic

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

Что произойдет, если указать оба атрибута async и defer одновременно?

Уровень: intermediate

Если указать оба атрибута, современные браузеры будут использовать async как приоритетный. Это может привести к тому, что скрипт выполнится до завершения загрузки DOM, даже если указан defer.

Как влияет async и defer на порядок выполнения скриптов?

Уровень: intermediate

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

Можно ли использовать async и defer для скриптов, которые добавляются динамически?

Уровень: advanced

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

Как async и defer влияют на производительность загрузки страницы?

Уровень: intermediate

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