Использование async и defer в HTML: работа и обратная совместимость

Быстрый ответ

Технически, использование async и defer в паре в теге script обосновано 😲, однако, поскольку async имеет приоритет перед defer, такая комбинация выглядит бессмысленной. Пример их совместного применения на практике:

<script src="EverSeenAScriptRunFast.js" async defer></script> <!-- `async` в приоритете, `defer` неучтён -->

Если же важно, чтобы скрипт выполнялся после полного разбора HTML, используйте только defer:

<script src="PatientlyWaiting.js" defer></script>

Теперь давайте разберемся, когда и зачем применять эти атрибуты.

Async и Defer: соревнование за оптимальную загрузку

В структуре вашего HTML-документа разворачивается шахматный матч, где async и defer выполняют роль стратегически значимых шахматных фигур, соревнующихся за оптимальную загрузку скриптов.

Как функционируют async и defer

Атрибут async шахматисты могут сравнить с коней, который передвигается без привязки к остальным фигурам, позволяя скриптам загружаться параллельно с разбором HTML, ускоряя этот процесс.

Defer, напротив, — это слон, выжидающий своего часа и откладывающий исполнение скрипта до окончания парсинга HTML.

Подробнее об этом расскажет наш спикер на видео

Обеспечение обратной совместимости

Async появился только в IE10, в то время как defer знаком нам с IE 5.5. Если вам важна совместимость со старыми браузерами, выбирайте defer.

Знание ходов: последовательность выполнения скриптов

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

Изменение правил: сочетание async и defer

Использование async и defer одновременно напоминают игру конем и слоном за один ход — эффективность такого хода сомнительна, так как async всегда будет преобладать.

Улучшение ходов: стратегия загрузки скриптов

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

Визуализация

Вообразите кулинарный поединок шеф-поваров...

Шеф 1👨‍🍳: Сразу приступает к приготовлению пасты (async), не дожидаясь, пока вода закипит.
Шеф 2👩‍🍳: Дает чесноку подрумяниться (DOMContentLoaded), а затем быстро сервирует пасту (defer).

Если использовать и async, и defer одновременно:

Шеф 3👨‍🍳👩‍🍳: Бросает сырую пасту в ещё холодную воду и ждёт, когда она закипит. Ой-ой 🤷!

Лучше выберите одного шефа: либо Спонтанного 👨‍🍳, либо Тщательного 👩‍🍳, чтобы паста получилась идеальной! 🍝

Кулинарная книга программиста: Как использовать async и defer

Когда async — ваш незаменимый ингредиент

Async уместен для скриптов, которые не связаны с другими, например, для системы аналитики или маркетинговых модулей. Эти скрипты могут загружаться и выполняться параллельно, не дожидаясь полной обработки документа.

Когда defer добавляет вкуса ожиданию

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

Избегаем кулинарных ошибок

При использовании async и defer важно помнить о потенциальных рисках:

• Готовность DOM: async может привести к выполнению скриптов до того, как DOM будет полностью готов.
• Взаимозависимость скриптов: Чтобы избежать Бардака в порядке выполнения, предпочтите defer, который обеспечит сохранение последовательности.
• Компромисс между производительностью: С async страница может загружаться быстрее, но последовательность обработки может оказаться хаотичной.

Полезные материалы

1. <script>: Элемент Script – HTML: HyperText Markup Language | MDN
2. Атрибут async у тега script на сайте W3Schools
3. Атрибут defer у тега script на сайте W3Schools
4. Javascript – атрибуты async и defer у тега script на Stack Overflow
5. Устранение JavaScript, блокирующего отображение в рекомендациях по скорости загрузки страниц от Google Developers
6. Эффективная загрузка JavaScript с помощью defer и async от Flavio Copes