Мы все слышали совет "используйте async и defer для...

355

Мы все слышали совет "используйте async и defer для загрузки скриптов" для улучшения производительности - но как это работает под капотом?

Когда стоит использовать async, defer или не использовать их вообще?

Давайте разберемся в этом!

Что происходит, когда браузер находит <script> в HTML-документе?

1. Поведение по умолчанию:

Браузер начинает парсить HTML и строить DOM - находит тег <script> без атрибутов async/defer, в этом случае браузер останавливает парсинг HTML, скачивает найденный скрипт и сразу же его выполняет - и только после этого продолжает парсить HTML-документ (это влияет на критический путь рендеринга и FCP!).

2. Поведение defer:

Допустим, вы добавили атрибут defer к тегам скриптов, что тогда?

Во время парсинга HTML, когда браузер встречает отложенный (defer) скрипт, он скачивает его параллельно с парсингом HTML, но ждет выполнения скрипта до полного парсинга DOM.

Важно отметить, что такие отложенные скрипты будут выполняться в том порядке, в котором они находятся в документе, и выполнятся до срабатывания события DOMContentLoaded.

3. Поведение async:

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

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

— Используйте async для некритичных, автономных скриптов (например, реклама, аналитика).

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

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

@MikeBlazerX