Основной контент

Всегда ли загружаются скрипты синхронно

1.0 Junior🔥 241 комментариев

#JavaScript Core#Браузер и сетевые технологии

Комментарии (1)

🐱

claude-haiku-4.5PrepBro AI2 апр. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

Синхронная и асинхронная загрузка скриптов

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

Способы загрузки скриптов

1. Синхронная загрузка (по умолчанию)

Когда вы используете обычный тег <script>, браузер загружает и выполняет скрипт синхронно. Это блокирует парсинг HTML до полного выполнения скрипта.

<!DOCTYPE html>
<html>
<head>
  <!-- Скрипт в head блокирует загрузку страницы -->
  <script src="script.js"></script>
</head>
<body>
  <h1>Заголовок</h1>
  <!-- Браузер сначала загружает script.js, потом парсит это содержимое -->
  <script src="app.js"></script> <!-- Синхронная загрузка -->
</body>
</html>

Порядок выполнения:

Браузер начинает парсить HTML
Встречает <script src="app.js">
Загружает и выполняет app.js
Только потом продолжает парсить остальной HTML

2. Асинхронная загрузка (async)

Атрибут async позволяет загружать скрипт в фоне без блокировки парсинга HTML.

<body>
  <h1>Контент страницы</h1>
  <p>Этот текст загружается первым</p>
  
  <!-- Загружается асинхронно -->
  <script async src="analytics.js"></script>
  
  <!-- Парсинг продолжается без ожидания analytics.js -->
</body>

Особенности async:

Загрузка происходит параллельно с парсингом HTML
Скрипт выполняется как только загружен (порядок не гарантирован)
Не подходит для скриптов, зависимых друг от друга

// Если у вас есть две библиотеки:
<script async src="jquery.js"></script>
<script async src="my-app.js"></script> // Может выполниться раньше jQuery!

3. Отложенная загрузка (defer)

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

<body>
  <h1>Контент страницы</h1>
  <p>Загружается без задержек</p>
  
  <!-- Загружается асинхронно, но выполняется в порядке -->
  <script defer src="jquery.js"></script>
  <script defer src="my-app.js"></script>
  <!-- my-app.js выполнится ПОСЛЕ jQuery -->
</body>

Особенности defer:

Загрузка происходит в фоне
Выполнение гарантировано в порядке следования
Событие DOMContentLoaded срабатывает после всех defer скриптов
Идеален для большинства случаев

Наглядное сравнение

Синхронная загрузка (без атрибутов):
|--parsing HTML--|
                 |--fetching script1.js--|
                                         |--execute script1.js--|
                                                                 |--parsing HTML continues--|

Асинхронная загрузка (async):
|--parsing HTML--|
                 |--fetching script1.js in background--|
|--parsing continues--|
                        |--execute script1.js when ready--|

Отложенная загрузка (defer):
|--parsing HTML--|
                 |--fetching script1.js in background--|
|--parsing continues--|
                       |--execute script1.js--|

Практические примеры

Плохо: Синхронная загрузка в head

<head>
  <script src="large-library.js"></script> <!-- Блокирует всё -->
  <script src="another-script.js"></script> <!-- Ждет первого -->
</head>
<body>
  <!-- Пользователь видит белую страницу -->
</body>

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

Хорошо: Отложенная загрузка в body

<body>
  <header>Заголовок</header>
  <main>Основной контент</main>
  <footer>Подвал</footer>
  
  <!-- Скрипты загружаются в фоне, но выполняются после парсинга -->
  <script defer src="jquery.js"></script>
  <script defer src="app.js"></script>
</body>

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

Специальный случай: Аналитика (async)

<head>
  <!-- Google Analytics - не критична для функционала -->
  <script async src="https://www.googletagmanager.com/gtag/js"></script>
</head>

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

Встроенные скрипты

Встроенный JavaScript также выполняется синхронно по умолчанию:

<script>
  console.log("Выполняется синхронно");
  console.log(document.querySelector("h1")); // null - элемент ещё не загружен
</script>
<h1>Заголовок</h1>

Современные подходы

1. Module Scripts

<!-- ES6 модули загружаются асинхронно по умолчанию -->
<script type="module" src="app.js"></script>

2. Dynamic Script Loading

const script = document.createElement('script');
script.src = 'app.js';
script.async = true; // или false для синхронной
document.body.appendChild(script);

script.onload = () => {
  console.log('Script loaded');
};

3. Promise-based Loading

const loadScript = (src) => {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = src;
    script.onload = resolve;
    script.onerror = reject;
    document.body.appendChild(script);
  });
};

// Использование
await loadScript('app.js');
console.log('Script loaded!');

Вывод

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

Заголовок

Контент страницы