Использование async и defer для управления скриптами

Опубликовано:
В мире веб-разработки оптимизация времени загрузки страниц имеет решающее значение. Два мощных атрибута тега <script> — async и defer — могут существенно повлиять на производительность сайта. Использование этих атрибутов без их глубокого понимания может негативно сказаться на производительности и привести к ошибкам. Давайте начнём с основ и узнаем, что делают эти атрибуты и когда их следует использовать.

Основы: как загружаются скрипты

По умолчанию, когда браузер встречает тег <script>, он:

  1. Приостанавливает парсинг HTML
  2. Загружает скрипт
  3. Выполняет скрипт
  4. Возобновляет парсинг HTML

Этот процесс может замедлить рендеринг страницы, особенно если речь идёт о больших скриптах или медленных соединениях. Кроме того, это может привести к ошибкам, если скрипт запускается до полной загрузки определённых элементов HTML, что случается, если скрипт неправильно размещён в документе.

async и defer: Обоюдоострый меч

async

<script async src="script.js"></script>

defer

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

Сравнение поведения

АтрибутЗагрузкаВыполнениеПарсинг HTMLОсновной риск
ОтсутствуетБлокирующаяНемедленноеОстанавливаетсяМедленный начальный рендер
asyncПараллельнаяКак можно скорееОстанавливается, затем продолжаетсяСостояние гонки
deferПараллельнаяПосле HTMLПродолжаетсяОтложенная функциональность

Порядок выполнения: async, defer и оба

Понимание порядка выполнения скриптов с различными атрибутами важно для управления зависимостями и обеспечения надлежащей функциональности. Вот как это работает:

  1. Обычные (без async или defer):
    • Выполняются в том порядке, в котором они встречаются в документе.
    • Блокируют парсинг HTML до тех пор, пока не будут загружены и выполнены.
  2. Скрипты с async:
    • Загружаются параллельно и выполняются, как только становятся доступными.
    • Порядок выполнения не гарантируется; запускаются сразу после загрузки.
    • Могут выполняться до полной загрузки DOM.
  3. Скрипты с defer:
    • Загружаются параллельно, но выполняются только после завершения парсинга HTML.
    • Выполняются в том порядке, в котором встречаются в документе.
    • Выполняются до события DOMContentLoaded.
  4. Скрипты с async и defer:
    • Атрибут async имеет приоритет в современных браузерах.
    • В старых браузерах, не поддерживающих async, они возвращаются к поведению defer.

Пример порядка выполнения

<script src="1.js"></script>
<script async src="2.js"></script>
<script async src="3.js"></script>
<script defer src="4.js"></script>
<script defer src="5.js"></script>

Возможный порядок выполнения:

  1. 1.js (блокирует парсинг)
  2. 2.js или 3.js (в зависимости от того, что загрузится первым)
  3. 3.js или 2.js (в зависимости от того, что загрузится вторым)
  4. 4.js
  5. 5.js

Лучшие практики

  1. Используйте async для независимых скриптов, таких как аналитика.
  2. Используйте defer для скриптов, зависящих от DOM или других скриптов.
  3. Размещайте скрипты в <head> с async или defer, чтобы начать загрузку раньше.
  4. Для критически важных скриптов используйте инлайн-скрипты в <head>.

Поддержка браузерами

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

Комментарии


Предыдущая Статья

Сокращения JavaScript экономящие время

Следующая Статья

Удаление дубликатов из массивов и строк в JavaScript