← Назад ко всем вопросам

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

1️⃣ Как кратко ответить

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

2️⃣ Подробное объяснение темы

Когда мы подключаем внешние JavaScript-файлы в HTML-документе, важно понимать, как и когда они загружаются и выполняются. Это влияет на производительность и поведение веб-страницы. Атрибуты async и defer помогают управлять этим процессом.

Зачем это нужно

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

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

  • Загрузка: Скрипт загружается асинхронно, параллельно с обработкой HTML.
  • Выполнение: Скрипт выполняется сразу после загрузки, не дожидаясь полной загрузки HTML.
  • Порядок выполнения: Порядок выполнения скриптов с async не гарантируется. Они выполняются в порядке завершения загрузки.

Пример использования async:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Async Example</title>
    <script src="script1.js" async></script>
    <script src="script2.js" async></script>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>
  • <script src="script1.js" async></script>: Загружает script1.js асинхронно. Выполнится сразу после загрузки.
  • <script src="script2.js" async></script>: Загружает script2.js асинхронно. Выполнится сразу после загрузки.
  • Порядок выполнения script1.js и script2.js не гарантируется.

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

  • Загрузка: Скрипт загружается асинхронно, параллельно с обработкой HTML.
  • Выполнение: Скрипт выполняется только после полной загрузки HTML-документа.
  • Порядок выполнения: Скрипты с defer выполняются в порядке их появления в документе.

Пример использования defer:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Defer Example</title>
    <script src="script1.js" defer></script>
    <script src="script2.js" defer></script>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>
  • <script src="script1.js" defer></script>: Загружает script1.js асинхронно. Выполнится после полной загрузки HTML.
  • <script src="script2.js" defer></script>: Загружает script2.js асинхронно. Выполнится после полной загрузки HTML.
  • Порядок выполнения: script1.js выполнится перед script2.js, так как он указан первым.

Применение

  • Используйте async для скриптов, которые не зависят от других скриптов и не влияют на DOM.
  • Используйте defer для скриптов, которые зависят от полной загрузки HTML или других скриптов.

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

Тема: JavaScript
Стадия: Tech

🔒 Подпишись на бусти автора и стань Алигатором, чтобы получить полный доступ к функционалу сайта и отслеживать свой прогресс!

Твои заметки