\n\n```\n\n**Характеристики:**\n- Загрузка не блокирует парсинг HTML\n- Порядок выполнения НЕ гарантирован (если несколько async скриптов)\n- Выполняется как только загрузился\n- Идеален для независимых скриптов (аналитика, реклама, трекеры)\n\n**Визуально:**\n```\nHTML парсинг: |----1----2----3----4----5|\n ↓ ↓\nзагрузка async: |--a(2)---b(4)--|\n ↓ ↓\nвыполнение: ----a-------b---\n```\n\n### 2. `defer` — Отложенное выполнение\n\nСкрипт загружается параллельно, но выполняется после полного парсинга HTML:\n\n```html\n\n\n\n```\n\n**Характеристики:**\n- Загрузка не блокирует парсинг\n- Порядок выполнения ГАРАНТИРОВАН (в порядке в документе)\n- Выполняется после DOMContentLoaded\n- Идеален для основной логики приложения\n\n**Визуально:**\n```\nHTML парсинг: |----1----2----3----4----5|\n ↓ ↓ ↓\nзагрузка defer: |--a(2)---b(3)---c(4)--|\n ↓\nвыполнение: ------------------------------------a---b---c\n```\n\n### 3. Без атрибутов — Синхронная загрузка и выполнение\n\nБраузер блокирует парсинг HTML до полной загрузки и выполнения скрипта:\n\n```html\n \n

Этот текст загружается только после выполнения скрипта

\n```\n\n**Характеристики:**\n- Загрузка блокирует парсинг HTML\n- Скрипт выполняется сразу после загрузки\n- Медленнее других методов\n- Используется редко, только для критически важных скриптов\n\n### 4. `module` тип — ES6 модули\n\n```html\n\n```\n\n**Характеристики:**\n- Работает как `defer` (отложенное выполнение)\n- Позволяет использовать `import`/`export`\n- Выполняется в строгом режиме\n- Каждый модуль загружается только один раз\n\n```javascript\n// app.js\nimport { init } from './utils.js';\nimport { render } from './components.js';\n\ninit();\nrender();\n```\n\n### 5. `nomodule` — Fallback для старых браузеров\n\n```html\n\n\n```\n\nСкрипт выполняется только в браузерах, не поддерживающих модули (IE 11).\n\n### 6. `crossorigin` — Для скриптов с других доменов\n\n```html\n\n```\n\n**Значения:**\n- `anonymous` — без учётных данных\n- `use-credentials` — с cookies и авторизацией\n\n### 7. `integrity` — Проверка целостности (SRI)\n\n```html\n\n```\n\nОбеспечивает, что скрипт не был изменён при передаче.\n\n### Сравнительная таблица\n\n| Атрибут | Загрузка | Парсинг | Выполнение | Порядок | Случай использования |\n|---------|----------|---------|-----------|---------|----------------------|\n| Нет | Блокирует | Блокирует | Сразу | 1-й | Критичные скрипты (редко) |\n| async | Параллель | Продолжается | Сразу | Любой | Аналитика, реклама |\n| defer | Параллель | Продолжается | После HTML | Гарантирован | Основная логика приложения |\n| type=\"module\" | Параллель | Продолжается | После HTML | Гарантирован | Современные приложения |\n\n### Практический пример оптимальной структуры\n\n```html\n\n \n \n \n \n \n \n
\n\n \n \n\n \n \n\n \n \n\n \n \n \n\n```\n\n### Лучшие практики\n\n- Используй `defer` для основных скриптов приложения\n- Используй `async` для независимых скриптов (аналитика, реклама)\n- Избегай синхронной загрузки для лучшей производительности\n- Размещай `
PrepBro
← Назад к вопросам

Какие знаешь атрибуты загрузки скриптов в JavaScript?

1.0 Junior🔥 161 комментариев
#Браузер и сетевые технологии#Оптимизация и производительность

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

🐱
claude-haiku-4.5PrepBro AI26 мар. 2026 г.(ред.)

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

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

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

1. async — Асинхронная загрузка и выполнение

Скрипт загружается параллельно с парсингом HTML, выполняется сразу после загрузки:

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

Характеристики:

  • Загрузка не блокирует парсинг HTML
  • Порядок выполнения НЕ гарантирован (если несколько async скриптов)
  • Выполняется как только загрузился
  • Идеален для независимых скриптов (аналитика, реклама, трекеры)

Визуально:

HTML парсинг:    |----1----2----3----4----5|
                      ↓        ↓
загрузка async:  |--a(2)---b(4)--|
                      ↓          ↓
выполнение:      ----a-------b---

2. defer — Отложенное выполнение

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

<script defer src="main.js"></script>
<script defer src="utils.js"></script>
<script defer src="app.js"></script>

Характеристики:

  • Загрузка не блокирует парсинг
  • Порядок выполнения ГАРАНТИРОВАН (в порядке в документе)
  • Выполняется после DOMContentLoaded
  • Идеален для основной логики приложения

Визуально:

HTML парсинг:    |----1----2----3----4----5|
                      ↓        ↓        ↓
загрузка defer:  |--a(2)---b(3)---c(4)--|
                                        ↓
выполнение:      ------------------------------------a---b---c

3. Без атрибутов — Синхронная загрузка и выполнение

Браузер блокирует парсинг HTML до полной загрузки и выполнения скрипта:

<script src="critical.js"></script> <!-- блокирует всё -->
<p>Этот текст загружается только после выполнения скрипта</p>

Характеристики:

  • Загрузка блокирует парсинг HTML
  • Скрипт выполняется сразу после загрузки
  • Медленнее других методов
  • Используется редко, только для критически важных скриптов

4. module тип — ES6 модули

<script type="module" src="app.js"></script>

Характеристики:

  • Работает как defer (отложенное выполнение)
  • Позволяет использовать import/export
  • Выполняется в строгом режиме
  • Каждый модуль загружается только один раз
// app.js
import { init } from './utils.js';
import { render } from './components.js';

init();
render();

5. nomodule — Fallback для старых браузеров

<script type="module" src="app.js"></script>
<script nomodule src="legacy.js"></script>

Скрипт выполняется только в браузерах, не поддерживающих модули (IE 11).

6. crossorigin — Для скриптов с других доменов

<script 
  src="https://cdn.example.com/script.js" 
  crossorigin="anonymous"
></script>

Значения:

  • anonymous — без учётных данных
  • use-credentials — с cookies и авторизацией

7. integrity — Проверка целостности (SRI)

<script 
  src="https://cdn.example.com/app.js"
  integrity="sha384-oqVuAfXRKap7fdgcCY5uykAXXcs..."
></script>

Обеспечивает, что скрипт не был изменён при передаче.

Сравнительная таблица

АтрибутЗагрузкаПарсингВыполнениеПорядокСлучай использования
НетБлокируетБлокируетСразу1-йКритичные скрипты (редко)
asyncПараллельПродолжаетсяСразуЛюбойАналитика, реклама
deferПараллельПродолжаетсяПосле HTMLГарантированОсновная логика приложения
type="module"ПараллельПродолжаетсяПосле HTMLГарантированСовременные приложения

Практический пример оптимальной структуры

<html>
  <head>
    <!-- Стили загружаются быстро, не блокируют -->
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <!-- Основной контент -->
    <div id="app"></div>

    <!-- Критичные скрипты (редко) - синхронно -->
    <!-- Обычно это не нужно -->

    <!-- Основная логика - defer -->
    <script defer src="bundle.js"></script>

    <!-- Аналитика - async -->
    <script async src="analytics.js"></script>

    <!-- Реклама - async -->
    <script async src="ads.js"></script>
  </body>
</html>

Лучшие практики

  • Используй defer для основных скриптов приложения
  • Используй async для независимых скриптов (аналитика, реклама)
  • Избегай синхронной загрузки для лучшей производительности
  • Размещай <script> в конце <body> или используй defer/async
  • Для современных приложений используй type="module"

Правильное управление загрузкой скриптов может значительно улучшить Time to Interactive (TTI) и общую производительность приложения.

Какие знаешь атрибуты загрузки скриптов в JavaScript? | PrepBro