Подключение JavaScript: тег <script>, атрибуты src, defer, async

Как JavaScript попадает на страницу? 🧐

Браузер не умеет читать мысли — ему нужно явно указать, где находится JavaScript-код. Для этого существует тег <script> — наш главный инструмент для подключения скриптов.

Базовый пример:

<script>
  alert('Привет, мир!'); // Код выполнится сразу
</script>

Но так обычно делают только для небольших скриптов. Чаще код выносят в отдельные файлы.

Подключаем внешние скрипты 🌍

Когда скрипт большой или используется на нескольких страницах, его помещают в файл с расширением .js и подключают через атрибут src:

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

Важные моменты: - Браузер скачивает файл и выполняет его содержимое - Если указан src, содержимое тега <script> игнорируется - Путь к файлу может быть абсолютным или относительным

Где размещать тег `<script>`? 📌

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

Традиционный подход (неоптимальный):

<head>
  <script src="heavy-script.js"></script> <!-- Тормозит загрузку! -->
</head>

Правильный способ (в конце <body>):

<body>
  <!-- Весь HTML-контент -->
  <script src="script.js"></script> <!-- Не блокирует отображение -->
</body>

Управление загрузкой: async и defer 🎛️

Что делать, если скрипт нужен в <head>, но не должен тормозить загрузку? На помощь приходят два мощных атрибута!

1. async — "Загружайся параллельно!"

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

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

Когда использовать: Для независимых скриптов (аналитика, реклама).

2. defer — "Жди своей очереди!"

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

Загрузка происходит параллельно с HTML
Выполнение откладывается до полной загрузки HTML
Скрипты выполняются в порядке подключения

Когда использовать: Для скриптов, зависящих от DOM.

Сравнение стратегий ⚖️

Стратегия	Загрузка	Выполнение	Порядок
Без атрибутов	Блокирующая	Немедленное	Да
`async`	Параллельная	При загрузке	Нет
`defer`	Параллельная	После HTML	Да

Практический пример 🛠️

Оптимальное подключение скриптов для типичного сайта:

<head>
  <script defer src="vendor.js"></script> <!-- Библиотеки -->
  <script defer src="main.js"></script>   <!-- Основной код -->
  <script async src="analytics.js"></script> <!-- Метрика -->
</head>

Почему так? - Критичный код (main.js) ждёт загрузки DOM благодаря defer - Неважная аналитика (analytics.js) не блокирует страницу - Порядок выполнения vendor.js → main.js сохраняется

Частые ошибки и как их избежать 🚧

Смешивание defer и обычных скриптов:

<script defer src="first.js"></script>
<script src="second.js"></script> <!-- Не ждёт загрузки HTML! -->

Использование async для зависимых скриптов:

<script async src="jquery.js"></script>
<script async src="plugin.js"></script> <!-- Может сработать раньше jQuery! -->

Не указывать type="module" для модулей:

<script type="module" src="app.js"></script> <!-- Современный стандарт -->

Теперь вы знаете всё о грамотном подключении JavaScript! Эти знания помогут вам создавать быстрые и отзывчивые веб-страницы. 🚀 Попробуйте применить их в своём следующем проекте!