Async, defer, динамические скрипты

Скрипт с атрибутом defer всегда будет выполняться тогда, когда DOM-дерево страницы уже построено, то есть такие скрипты всегда будут дожидаться полной готовности вёрстки страницы.

Но, при этом они срабатывают до события DOMContentLoaded.

Такие скрипты можно помещать в head помимо body.

Скрипты с атрибутом defer сохраняют порядок выполнения относительно друг друга.

Например:


В данном примере, даже если второй скрипт по объёму меньше первого, всё равно, сначала выполнится первый скрипт, затем второй.

Это может быть полезно, к примеру, при использовании библиотек, например, той же jquery: сначала подключаем скрипт библиотеки, а затем использующий её скрипт.

Скрипты с атрибутом async

Страница не ждёт асинхронных скриптов, содержимое обрабатывается и отображается.

Событие DOMContentLoaded и асинхронные скрипты не ждут друг друга.

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

Этот скрипт никого не ждёт, работает абсолютно независимо.

Если на странице есть несколько таких скриптов, тот, кто из них первым загрузится, тот первым и начнёт работать.

Атрибут async мы присваиваем скрипту, если уверены, что он не зависит от DOM-структуры и других скриптов.

Такие скрипты могут использоваться, к примеру, для счётчиков, метрики.

Динамически загружаемые скрипты

По умолчанию ведут себя как async.


Можно изменить порядок скриптов относительно друг друга при их загрузке. Для этого, перед тем, как помещать скрипты на страницу, добавляем для атрибута async параметр false


После этого скрипт будет вести себя как обычный скрипт, размещённый на странице.

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