Что будет при использовании тега script в head когда браузер дойдет до него?

1.7 Middle🔥 153 комментариев

#Браузер и сетевые технологии

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

🐱

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

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

Механизм загрузки и выполнения тега `<script>` в `<head>`

Когда браузер в процессе парсинга HTML встречает тег <script> внутри секции <head>, происходит следующая последовательность действий:

1. Приостановка парсинга HTML

Браузер немедленно останавливает построение DOM (Document Object Model). Это стандартное поведение для скриптов без атрибутов async или defer. Парсер ждет, пока скрипт будет полностью загружен и выполнен, прежде чем продолжить анализ остальной части документа.

<!DOCTYPE html>
<html>
<head>
    <script>
        // В этот момент построение DOM приостановлено
        console.log('Скрипт выполняется, парсинг остановлен');
    </script>
    <!-- Дальнейший контент head не будет обработан пока скрипт выше не выполнится -->
</head>
<body>
    <!-- Парсинг дойдет сюда только после выполнения скрипта -->
</body>
</html>

2. Загрузка скрипта (если указан src)

Если скрипт внешний (с атрибутом src), браузер начинает загрузку файла с указанного URL. Это блокирующая операция — парсинг HTML возобновится только после полной загрузки.

<script src="https://example.com/script.js"></script>
<!-- Парсинг заблокирован на время загрузки и выполнения script.js -->

3. Выполнение скрипта

После загрузки (или сразу для inline-скриптов) происходит выполнение JavaScript кода. Важные особенности:

Скрипты выполняются в порядке их появления в документе
На этом этапе DOM еще не построен полностью — элементы после тега script недоступны
Можно обращаться к предыдущим элементам DOM, но с осторожностью

// В скрипте в head:
console.log(document.head); // Доступен
console.log(document.body); // Будет null или пустой элемент, так как body еще не обработан

4. Влияние на производительность и подходы к оптимизации

Проблемы стандартного подхода:

Задержка отрисовки страницы — пользователь видит белый экран пока скрипты загружаются и выполняются
Блокировка параллельных загрузок — современные браузеры могут загружать некоторые ресурсы параллельно, но выполнение скрипта все равно блокирует рендеринг
Плохой опыт для пользователей с медленным соединением

Современные стратегии загрузки скриптов:

Атрибут async — скрипт загружается асинхронно и выполняется сразу после загрузки, не сохраняя порядок:

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

Атрибут defer — скрипт загружается асинхронно, но выполняется только после полного парсинга документа, сохраняя порядок:

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

Размещение перед закрывающим </body> — классический подход для некритичных скриптов:

<body>
    <!-- Весь контент -->
    <script src="script.js"></script>
</body>

Динамическая загрузка через JavaScript:

const script = document.createElement('script');
script.src = 'script.js';
document.head.appendChild(script);

5. Практические рекомендации

Критичные скрипты, необходимые для начального рендеринга, можно оставить в head с async или defer
Стили и шрифты загружайте как можно раньше — они не блокируют парсинг, но влияют на визуальное отображение
Используйте модули ES6 с типом module — они по умолчанию ведут себя как defer:

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

Минимизируйте inline-скрипты в head — они всегда блокирующие и кэшируются только в рамках страницы

Итог: Помещение скриптов в <head> без атрибутов async/defer создает критическую точку блокировки рендеринга. Современные best practices рекомендуют либо использовать асинхронные загрузки, либо переносить скрипты в конец документа, что значительно улучшает производительность и скорость загрузки страницы. Для анализа конкретных сценариев всегда используйте инструменты разработчика Chrome DevTools или Lighthouse.