Опишите разницу между <script>, <script async> и <script defer>

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

<script> — обычный скрипт

По умолчанию, когда вы подключаете JavaScript с помощью тега <script>, браузер выполняет следующие действия:

1. Блокировка рендеринга: При загрузке страницы, браузер приостанавливает парсинг и рендеринг HTML-контента до тех пор, пока не загрузит и не выполнит скрипт. Это может замедлить рендеринг страницы, особенно если скрипт большой или внешний.
2. Синхронность: Скрипты, подключенные обычным способом, выполняются синхронно, то есть браузер сначала загружает файл скрипта, затем выполняет его, после чего продолжает рендеринг HTML-страницы.

Пример:

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

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

<script async> — асинхронная загрузка скрипта

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

Как работает async:

1. Загрузка скрипта: Скрипт загружается асинхронно, параллельно с другими процессами на странице.
2. Выполнение скрипта: После того как скрипт загружен, он немедленно выполняется, даже если остальные части страницы еще не были загружены. Это может повлиять на порядок выполнения скриптов, так как они могут быть выполнены в том порядке, в котором завершится их загрузка.

Когда использовать async:

• Идеально для скриптов, которые не зависят от других частей страницы или других скриптов, например, для аналитики, виджетов, рекламы и прочего.

Пример:

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

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

<script defer> — отложенная загрузка скрипта

Когда используется атрибут defer, скрипт загружается асинхронно, но его выполнение откладывается до тех пор, пока вся HTML-страница не будет полностью загружена и обработана.

Как работает defer:

1. Загрузка скрипта: Скрипт загружается асинхронно, параллельно с рендерингом страницы, но его выполнение откладывается.
2. Выполнение скрипта: Скрипт выполняется только после того, как весь HTML будет загружен и обработан. Это гарантирует, что скрипт будет выполнен в правильном порядке, даже если он загружался позже других скриптов.

Когда использовать defer:

• Идеально для скриптов, которые должны быть выполнены после загрузки всего контента страницы, но не должны блокировать рендеринг.

Пример:

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

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

Разница между async и defer

Когда использовать каждый из вариантов

1. Обычный <script>: Используйте, если JavaScript критичен для первоначальной загрузки страницы, например, для настроек, без которых страница не может корректно функционировать.
2. <script async>: Используйте, если скрипт независим и не зависит от других частей страницы, например, для аналитики или рекламы. Такой скрипт можно загрузить и выполнить параллельно с другими процессами на странице.
3. <script defer>: Используйте, если скрипт зависит от других частей страницы (например, взаимодействует с DOM) и должен быть выполнен только после того, как страница будет полностью загружена. Это гарантирует, что скрипт выполнится в правильном порядке.

Заключение

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

Полезные ссылки:

1. MDN Web Docs: <script>
2. MDN Web Docs: async атрибут
3. MDN Web Docs: defer атрибут
4. Google Developers: Understanding JavaScript Loading