Различные способы загрузки JavaScript с помощью тегов...

Различные способы загрузки JavaScript с помощью тегов <script> в HTML

Оптимизация загрузки скриптов:

Различия между сценариями async и defer

defer - более старый, async - чуть более новый. Оба хорошо поддерживаются.

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

"Стандартный" немодульный <script> (подразумевается type=text/javascript, нет async, нет defer)

❌ блокирует HTML-парсер

ℹ️ немедленно загружается, разбирается и выполняется, перед любыми последующими <script> в HTML

✔️ гарантирован порядок выполнения

❌ блокирует событие DOMContentLoaded

❌ учитывая вышеизложенное, не подходит для некритического кода, так как может привести к "единой точке отказа" и задержке запуска динамических веб-приложений

`defer` скрипты:

ℹ️ для inline (non-module) скриптов, defer игнорируется и не имеет эффекта (они выполняются немедленно)

💡 если вам действительно нужно, вы можете использовать base64 хак

ℹ️ для inline (module) скриптов, defer подразумевается (автоматически)

✔️ загружаются без блокировки HTML-парсера

✔️ гарантирован относительный порядок выполнения нескольких defer скриптов (если у всех есть src)

⚠️ однако, это баг в IE9-

ℹ️ выполняются после разбора DOM (но перед поднятием DOMContentLoaded)

❌ блокирует событие DOMContentLoaded (если скрипт не async defer)

async скрипты:

ℹ️ для inline (non-module) скриптов, async игнорируется и не имеет эффекта

ℹ️ для inline (module) скриптов, async поддерживается source - для выполнения вне очереди, как можно скорее

✔️ загружаются без блокировки HTML-парсера

⚠️ выполнение вне очереди; выполняются, как только доступны

⚠️ относительный порядок выполнения async скриптов не гарантирован (также относится к async, type=module скриптам)

⚠️ не ждут завершения разбора HTML; могут прервать построение DOM (особенно, если загружаются из кэша браузера)

⚠️ блокируют событие load (но не DOMContentLoaded)

⚠️ не поддерживаются в IE9-

async defer скрипты:

— интерпретируются как async; возврат к defer для древних браузерных движков, не поддерживающих async (IE9...)

Больше информации найдете тут:

https://gist.github.com/jakub-g/385ee6b41085303a53ad92c7c8afd7a6

@MikeBlazerX

Источник новости https://t.me/mikeblazerx/3475...