\n\n\n\n \n Документ\n\n\n\n```\n\n1. **Браузер начнет парсинг HTML** и немедленно встретит тег `\n \n \n ```\n **Преимущество:** Гарантирует, что скрипт выполнится после полной загрузки и разбора всего HTML-контента. DOM готов для манипуляций.\n\n2. **В `` с атрибутами `defer` или `async` (современный подход):**\n ```html\n \n \n \n \n Мой сайт\n \n \n \n \n \n ```\n * **`async`:** Скрипт загружается асинхронно, без блокировки парсера, и выполняется **немедленно после загрузки**, не дожидаясь готовности DOM. Подходит для независимых скриптов (например, счетчики, реклама).\n * **`defer`:** Скрипт загружается асинхронно, но выполняется **строго после завершения парсинга документа**, перед событием `DOMContentLoaded`. Это идеальный выбор для скриптов, которым нужен полный DOM. Скрипты с `defer` выполняются в порядке их объявления.\n\n### Итог\n\nХотя браузер и не \"сломается\" от `
PrepBro
← Назад к вопросам

Можно ли написать тег Script в первую строчку кода?

2.0 Middle🔥 191 комментариев
#JavaScript Core

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

🐱
deepseek-v3.2PrepBro AI4 апр. 2026 г.(ред.)

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

Можно ли разместить тег <script> в первой строке HTML?

Технически — да, это возможно с точки зрения синтаксиса HTML. Современные браузеры успешно обработают документ, даже если тег <script> будет расположен в самом начале, до объявления <!DOCTYPE html> или <html>. Однако крайне не рекомендуется так делать из-за серьезных негативных последствий для корректности, производительности и предсказуемости работы страницы.

Рассмотрим детально, что происходит в таком сценарии, и почему это плохая практика.

Что произойдет, если <script> окажется первым?

<script>console.log('Я первый!');</script>
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Документ</title>
</head>
<body></body>
</html>
  1. Браузер начнет парсинг HTML и немедленно встретит тег <script>.
  2. По умолчанию выполнение скрипта блокирующее (blocking). Это означает, что парсинг и построение DOM-дерева немедленно приостанавливаются.
  3. Браузер загрузит (если есть src) и выполнит JavaScript-код. В этот момент документ пуст — теги <html>, <head>, <body> еще не обработаны, их DOM-узлы не существуют.
  4. Только после полного выполнения скрипта парсинг HTML возобновится с <!DOCTYPE html>.

Ключевые проблемы и риски

  • Некорректный режим отображения (Quirks Mode): Тег <!DOCTYPE html> должен быть самой первой строкой в документе. Любые символы (включая пробелы, комментарии или теги) перед ним заставляют браузер переходить в режим совместимости (Quirks Mode). В этом режиме браузер эмулирует некорректное поведение старых версий для обратной совместимости. Это приводит к непредсказуемым отличиям в расчете размеров (box-model), стилей и верстки по сравнению со стандартным стандартным режимом (Standards Mode).

  • Работа с несуществующим DOM: Скрипт, выполняющийся до объявления <body>, не имеет доступа к элементам страницы.

    // Этот код вызовет ошибку или не сработает
document.getElementById('myElement'); // Element is null
document.body.style.backgroundColor = 'red'; // document.body is null

    Попытки взаимодействия с DOM приведут к ошибкам. Единственное, что может делать такой скрипт — это выполнять вычисления или определять глобальные переменные.

  • Критическое влияние на производительность (Frontend Performance): Блокирующий скрипт в начале документа создает максимальную задержку перед отображением любого контента для пользователя (блокировка рендеринга). Это напрямую ухудшает ключевые метрики пользовательского опыта, такие как First Contentful Paint (FCP) и Largest Contentful Paint (LCP).

  • Нарушение стандартов и читаемости кода: Такой код противоречит общепринятым стандартам разработки (например, HTML Living Standard) и сильно снижает читаемость и поддерживаемость кодовой базы для других разработчиков.

Рекомендуемые подходы для вставки скриптов

Правильное расположение и атрибуты тега <script> решают все вышеперечисленные проблемы.

  1. В конце <body> (классический подход): 
    <!DOCTYPE html>
<html>
<body>
    <!-- Весь контент страницы -->
    <script src="app.js"></script>
</body>
</html>

    **Преимущество:** Гарантирует, что скрипт выполнится после полной загрузки и разбора всего HTML-контента. DOM готов для манипуляций.
  1. В <head> с атрибутами defer или async (современный подход): 
    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Мой сайт</title>
    <script src="analytics.js" async></script>
    <script src="main.js" defer></script>
</head>
<body></body>
</html>

    *   **`async`:** Скрипт загружается асинхронно, без блокировки парсера, и выполняется **немедленно после загрузки**, не дожидаясь готовности DOM. Подходит для независимых скриптов (например, счетчики, реклама).
    *   **`defer`:** Скрипт загружается асинхронно, но выполняется **строго после завершения парсинга документа**, перед событием `DOMContentLoaded`. Это идеальный выбор для скриптов, которым нужен полный DOM. Скрипты с `defer` выполняются в порядке их объявления.

Итог

Хотя браузер и не "сломается" от <script> в первой строке, делать этого категорически не следует. Это антипаттерн, ведущий к:

  • Активации Quirks Mode и broken-верстке.
  • Ошибкам при обращении к DOM.
  • Значительной деградации производительности загрузки страницы.

Правило: Всегда начинайте документ с <!DOCTYPE html>. Размещайте критичные для отображения скрипты в конце <body> или используйте атрибуты defer/async в <head> для оптимальной стратегии загрузки. Это фундамент для создания быстрых, надежных и соответсвующих стандартам веб-приложений.