Структура HTML и интеграция JS: варианты размещения

Раздел: Веб-разработка -> Интеграция JS в HTML

Основы структуры HTML и интеграции JavaScript

Наиболее распространённый и рекомендуемый способ подключения внешнего JavaScript - использование тега <script> с атрибутом defer, размещённого в <head>. Это позволяет браузеру параллельно загружать скрипт и парсить HTML, а выполнение кода происходит только после полной загрузки DOM. Такой подход не блокирует рендеринг и сохраняет порядок выполнения скриптов.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Пример</title>
  <script src="script.js" defer></script>
</head>
<body>
  <h1>Привет, мир!</h1>
  <p>Текст страницы</p>
</body>
</html>

Index html js (структура html и подключение js)

Этот способ гарантирует, что скрипт выполнится после того, как все элементы DOM будут доступны, но до события DOMContentLoaded. Если нужно выполнить код после полной загрузки страницы (включая изображения), следует использовать событие load.

Типичная проблема:

Если скрипт требует загрузки внешних ресурсов (например, карт), defer не гарантирует их готовность. Решение - подписываться на событие load окна.

Как подключить JS-файл в заголовок страницы без задержки рендеринга?

Размещение тега <script> внутри <head> без атрибутов, но с обёрткой в событие DOMContentLoaded.

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

// script.js
document.addEventListener('DOMContentLoaded', function() {
  console.log('DOM готов');
});

Проблема:

Скрипт блокирует парсинг HTML, пока загружается и выполняется. Решение: перенести скрипт в конец <body> или использовать defer.

Как обеспечить загрузку DOM перед выполнением скрипта без defer?

Поместить тег <script> перед закрывающим тегом </body>. Это классический метод, который гарантирует, что все элементы страницы уже распарсены.

<body>
  <!-- содержимое страницы -->
  <script src="script.js"></script>
</body>

Недостаток:

Загрузка скрипта начинается только после загрузки всего HTML, что может замедлить время до интерактивности.

Как загрузить скрипт асинхронно, но выполнять в порядке подключения?

Использовать атрибут defer. Он доступен для внешних скриптов и поддерживается всеми современными браузерами.

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

Оба скрипта загрузятся параллельно, но выполнятся строго по порядку (сначала alex.js, потом bob.js) после полного парсинга HTML.

Ошибка:

На некоторых старых браузерах defer может игнорироваться. Решение: использовать polyfill или размещать скрипты в конце body.

Как загрузить скрипт без блокировки и без сохранения порядка?

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

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

Проблема:

Если скрипт зависит от другого скрипта или от DOM, возможны ошибки. Решение: использовать async только для независимых скриптов (например, счётчики).

Как вставить код JavaScript прямо в HTML-файл?

Inline-скрипт размещается внутри тега <script> без атрибута src.

<script>
  console.log('Hello from inline!');
</script>

Недостаток:

Смешивание разметки и логики усложняет поддержку и кеширование. Решение: выносить большие объёмы кода во внешние файлы.

Как подключать модули ES6 с поддержкой import/export?

Использовать <script type="module"> или <script type="module" src="...">. Модули выполняются после парсинга HTML (как defer) и имеют изолированную область видимости.

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

// main.js
import { greet } from './utils.js';
greet();

Типичные ошибки:

Необходимость сервера (CORS) - модули не работают с file:// протоколом.
Старые браузеры не поддерживают модули - требуется сборка (Webpack, Vite).

Расширенные примеры интеграции JavaScript

Пример с несколькими скриптами и порядком выполнения

Сравнение поведения скриптов с defer и без.

Пример

<!DOCTYPE html>
<html>
<head>
  <script>console.log('head inline');</script>
  <script src="first.js" defer></script>
  <script src="second.js" defer></script>
</head>
<body>
  <script>console.log('body inline');</script>
  <script src="third.js"></script>
</body>
</html>

Результат в консоли (при условии, что файлы существуют):

head inline
body inline
third.js (содержимое)
first.js (содержимое)
second.js (содержимое)

Обратите внимание: inline-скрипты выполняются по мере парсинга, скрипт без атрибута (third.js) - после загрузки body, а скрипты с defer - после полного HTML.

Динамическая загрузка скрипта

Создание элемента <script> через JavaScript позволяет подгружать код по необходимости.

Пример

function loadScript(src) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = src;
    script.onload = () => resolve(script);
    script.onerror = () => reject(new Error(`Не удалось загрузить ${src}`));
    document.head.appendChild(script);
  });
}

loadScript('https://code.jquery.com/jquery-3.7.1.min.js')
  .then(() => console.log('jQuery загружен'))
  .catch(err => console.error(err));

jQuery загружен

Модульный подход с type="module"

Пример с экспортом и импортом.

Пример

<!-- index.html -->
<script type="module">
  import { add } from './math.js';
  console.log(add(2, 3));
</script>

Пример

// math.js
export function add(a, b) {
  return a + b;
}

Модули выполняются после полного парсинга HTML, поэтому можно безопасно обращаться к элементам DOM.

Использование событий DOMContentLoaded и load

Пример

<script>
  document.addEventListener('DOMContentLoaded', () => {
    console.log('DOM готов, но изображения могут загружаться');
  });
  window.addEventListener('load', () => {
    console.log('Страница полностью загружена');
  });
</script>

DOM готов, но изображения могут загружаться
Страница полностью загружена

Обработка ошибок загрузки внешнего скрипта

Пример

<script src="nonexistent.js" onerror="console.error('Скрипт не загружен')"></script>

Скрипт не загружен

Структура HTML и подключение JS - comments

Index html js (javascript)