В мире веб-разработки оптимизация времени загрузки страниц имеет решающее значение. Два мощных атрибута тега

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

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

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

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

Асинхронность и отсрочка: палка о двух концах

Асинхронный

• Что он делает: Асинхронно загружает скрипт, пока продолжается анализ HTML.
• Когда он выполняется: Как только он загружен, анализ HTML приостанавливается.
• Когда используется: Независимые скрипты, которые не зависят от других скриптов или содержимого DOM.
• Предостережение: Может выполняться вне очереди, что может привести к нарушению зависимостей.

Отложить

• Что он делает: Загружает скрипт, пока продолжается анализ HTML.
• При выполнении: После завершения анализа HTML, но до события DOMContentLoaded.
• Когда используется: Скрипты, которые полагаются на содержимое DOM или должны выполняться в определенном порядке.
• Предупреждение: Может задержать выполнение критически важных функций.

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

Порядок выполнения: асинхронный, отложенный и оба

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

1. Обычные скрипты (без асинхронности и отсрочки):

   • Выполнять в том порядке, в котором они указаны в документе.
   • Блокировать анализ HTML до тех пор, пока он не будет загружен и выполнен.

2. Асинхронные скрипты:

   • Загружайте параллельно и запускайте, как только они станут доступны.
   • Нет гарантированного порядка выполнения; они запускаются сразу после загрузки.
   • Может выполняться до полной загрузки DOM.

3. Отложить скрипты:

   • Загружать параллельно, но выполнять только после завершения анализа HTML.
   • Выполнять в том порядке, в котором они указаны в документе.
   • Выполнять перед событием DOMContentLoaded.

4. Скрипты с асинхронностью и отсрочкой:

   • Атрибут async имеет приоритет в современных браузерах.
   • В старых браузерах, которые не поддерживают асинхронность, они откладывают поведение.

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

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

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

Обратите внимание, что 2 и 3 могут выполняться в любом порядке или даже раньше 1, если загрузка 1.js занимает больше времени.

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

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

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

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