Имеет ли значение расположение тега Script в файле

1.8 Middle🔥 151 комментариев

#Архитектура и паттерны

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

🐱

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

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

Имеет ли значение расположение тега script в HTML файле?

Короткий ответ: Да, расположение тега script имеет критическое значение для производительности и корректности работы приложения.

Три основных места для тега script

1. В `<head>` без атрибутов (традиционный способ)

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>My App</title>
  <script src="app.js"></script>  <!-- Блокирующая загрузка -->
</head>
<body>
  <h1>Загрузка...</h1>
</body>
</html>

Проблемы:

Браузер блокирует отрисовку страницы пока не загрузится и не выполнится script
Если app.js 5MB, пользователь видит белый экран 5 секунд
Очень плохая производительность

Timeline:

1. Браузер начинает парсить HTML
2. Встречает <script src="app.js"></script>
3. ОСТАНАВЛИВАЕТ парсинг HTML
4. Загружает app.js (может быть долго)
5. Выполняет app.js
6. Продолжает парсить остальной HTML
7. Отрисовывает страницу

2. В конце `<body>` без атрибутов (рекомендовалось раньше)

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>My App</title>
</head>
<body>
  <h1>Содержание страницы</h1>
  <p>Текст...</p>
  
  <script src="app.js"></script>  <!-- Загружается в конце -->
</body>
</html>

Преимущества:

Страница отрисовывается сразу
Пользователь видит содержание
Script загружается после

Недостатки:

Начинается загрузка позже
Сначала HTML парсится полностью, потом скачивается JS

Timeline:

1. Парсится весь HTML
2. Отрисовывается страница (пользователь видит контент)
3. Встречается <script> в конце
4. Загружается app.js
5. Выполняется app.js

3. В `<head>` с атрибутами (современный способ)

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>My App</title>
  
  <!-- async - загружается параллельно, выполняется сразу при готовности -->
  <script src="analytics.js" async></script>
  
  <!-- defer - загружается параллельно, выполняется после парсинга -->
  <script src="app.js" defer></script>
</head>
<body>
  <h1>Содержание</h1>
</body>
</html>

Лучший подход:

Параллельная загрузка и парсинг
HTML отрисовывается быстро
Script выполняется в нужный момент

defer vs async

Это ключевая разница:

<!-- async - выполняется сразу при загрузке -->
<script src="tracker.js" async></script>

<!-- defer - выполняется после парсинга HTML -->
<script src="app.js" defer></script>

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

Различия:

Атрибут | Загрузка      | Выполнение       | Когда использовать
────────┼───────────────┼──────────────────┼─────────────────────────
нет     | Блокирует     | Сразу            | Никогда (очень редко)
async   | Параллельно   | Сразу при готов. | Analytics, ads
defer   | Параллельно   | После парсинга   | Основной код приложения

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

Пример 1: Плохо - блокирующий скрипт

<!DOCTYPE html>
<html>
<head>
  <script src="myapp.js"></script> <!-- 5MB, блокирует все -->
</head>
<body>
  <!-- Пользователь видит белый экран ~5 сек -->
  <h1>Hello</h1>
</body>
</html>

<!-- FCP (First Contentful Paint): 5 сек+ -->
<!-- LCP (Largest Contentful Paint): 5 сек+ -->
<!-- Плохой UX -->

Пример 2: Хорошо - defer атрибут

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>My App</title>
  <script src="myapp.js" defer></script> <!-- Загружается параллельно -->
</head>
<body>
  <!-- Пользователь видит контент сразу -->
  <h1>Hello</h1>
  <p>Content loads immediately</p>
</body>
</html>

<!-- FCP: 0.5 сек -->
<!-- LCP: 0.8 сек -->
<!-- Хороший UX -->

Пример 3: Несколько скриптов с defer

<head>
  <!-- Выполняются в порядке: 1 -> 2 -> 3 -->
  <script src="vendor.js" defer></script>    <!-- Загружается 1-й -->
  <script src="lib.js" defer></script>       <!-- Загружается 2-й -->
  <script src="app.js" defer></script>       <!-- Загружается 3-й -->
</head>

Важно: defer сохраняет порядок выполнения!

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

<head>
  <!-- Выполняется в порядке: как только загрузится -->
  <!-- Порядок непредсказуем! -->
  <script src="google-analytics.js" async></script>
  <script src="facebook-pixel.js" async></script>
  <script src="intercom.js" async></script>
</head>

Почему async? Эти скрипты независимы друг от друга.

Где должны быть style теги?

<head>
  <!-- CSS в <head> - правильно -->
  <link rel="stylesheet" href="styles.css">
  <!-- Браузер загружает CSS параллельно и применяет перед отрисовкой -->
</head>
<body>
  <!-- Никогда в конце body! -->
</body>

Когда использовать inline script

<head>
  <!-- Inline script для критического CSS (Critical CSS) -->
  <style>
    body { margin: 0; }
    h1 { font-size: 24px; }
  </style>
  
  <!-- Отложенная загрузка не-критичного CSS -->
  <link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'">
</head>

Современный подход (Next.js, SvelteKit)

<!-- Автоматически обрабатывается: -->
<!-- - Scripts с defer по умолчанию -->
<!-- - Оптимальное расположение в head -->
<!-- - Минификация и оптимизация -->
</html>

Core Web Vitals и расположение script

// Плохое расположение script влияет на метрики:

// FCP (First Contentful Paint) - когда появляется первый контент
// Блокирующий script в <head> = медленный FCP

// LCP (Largest Contentful Paint) - когда загружается основной контент
// Блокирующий script в <head> = медленный LCP

// CLS (Cumulative Layout Shift) - стабильность макета
// Плохо расположенный script может вызывать прыжки макета

Чеклист лучших практик

<!-- ✅ ПРАВИЛЬНО -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">
  
  <!-- CSS в head -->
  <link rel="stylesheet" href="styles.css">
  
  <!-- Критические скрипты с defer -->
  <script src="app.js" defer></script>
  
  <!-- Аналитика и трекеры с async -->
  <script src="analytics.js" async></script>
</head>
<body>
  <h1>App</h1>
  <!-- Может быть необходимый инлайн скрипт -->
  <script>
    // Что-то очень критичное
  </script>
</body>
</html>

<!-- ❌ НЕПРАВИЛЬНО -->
<!DOCTYPE html>
<html>
<head>
  <script src="app.js"></script>  <!-- Блокирует все! -->
</head>
<body>
  <script src="other.js"></script> <!-- В body -->
  <link rel="stylesheet" href="styles.css"> <!-- CSS в конце -->
</body>
</html>

Инструменты для анализа

# Chrome DevTools
# Performance -> Network -> посмотреть timeline скриптов

# Lighthouse
# Проверяет FCP, LCP, блокирующие ресурсы

# WebPageTest
# Детальный анализ загрузки и выполнения

Заключение

Расположение тега script имеет критическое значение:

<head> без атрибутов - избегай, блокирует отрисовку
Конец <body> - хорошо, но не оптимально
<head> с defer - ЛУЧШИЙ вариант для основного кода
<head> с async - для независимых скриптов (analytics)
CSS - ВСЕГДА в <head>

Правило: Помещай скрипты в <head> с defer для максимальной производительности и лучших Core Web Vitals метрик.

Загрузка...

Содержание страницы

Содержание

Hello