\n\n\n \n

Мой сайт

\n\n` выполняются **до того, как браузер построил тело документа**. Попытка обратиться к элементам DOM, которых ещё не существует, вызовет ошибки.\n\n```javascript\n// script.js, подключённый в \nconsole.log(document.querySelector('.my-element')); // null\ndocument.querySelector('.my-element').style.color = 'red'; // Ошибка!\n```\n\nДля обхода приходится использовать события типа `DOMContentLoaded` или `load`, что усложняет код:\n```javascript\ndocument.addEventListener('DOMContentLoaded', function() {\n // Теперь DOM доступен\n document.querySelector('.my-element').style.color = 'red';\n});\n```\n\n### 3. Неоптимальная загрузка ресурсов\nБраузер не может параллельно загружать другие ресурсы (изображения, стили) во время выполнения синхронного скрипта. Это нарушает принцип **максимального параллелизма** современных браузеров, увеличивая общее время загрузки.\n\n### 4. Проблемы с порядком выполнения\nПри нескольких синхронных скриптах в `` они выполняются строго по порядку вставки. Если второй скрипт зависит от первого, а первый — тяжёлый, второй будет ждать, усугубляя блокировку.\n\n```html\n \n \n```\n\n### 5. Влияние на Core Web Vitals и SEO\nСовременные метрики производительности (**Largest Contentful Paint, First Contentful Paint**) напрямую страдают от блокирующих скриптов:\n- **LCP** задерживается, так как основной контент не отображается.\n- Поисковые системы (например, Google) учитывают скорость загрузки в ранжировании. Медленные страницы получают худшие позиции.\n\n### Рекомендуемые альтернативы и решения\n\n**Вариант 1: Атрибут `defer`**\n- Скрипты загружаются асинхронно, но выполняются **после полного разбора DOM**, в порядке их объявления.\n- Идеально для скриптов, зависящих от DOM.\n\n```html\n\n \n \n\n```\n\n**Вариант 2: Атрибут `async`**\n- Скрипты загружаются и выполняются **асинхронно без сохранения порядка**.\n- Подходит для независимых скриптов (счётчики, реклама).\n\n```html\n\n \n\n```\n\n**Вариант 3: Перемещение скриптов перед ``**\n- Классический подход: скрипты выполняются после построения видимого DOM.\n- Гарантирует доступность элементов, но может задержать функциональность.\n\n```html\n\n \n \n\n```\n\n### Итог\nИспользование `
PrepBro
← Назад к вопросам

Какие проблемы может вызвать script в head без атрибута async?

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

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

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

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

Проблемы при размещении <script> в <head> без атрибута async

Когда <script> помещается в секцию <head> HTML-документа без атрибутов async или defer, браузер выполняет его синхронно и блокирующе. Это приводит к ряду критических проблем для производительности и пользовательского опыта.

1. Блокировка парсинга и отрисовки страницы

Браузер обрабатывает HTML последовательно. Обнаружив <script> без async/defer, он останавливает парсинг HTML, загружает (если скрипт внешний) и выполняет скрипт немедленно. Только после этого продолжает строить DOM.

<!DOCTYPE html>
<html>
<head>
    <!-- Этот скрипт заблокирует всё ниже -->
    <script src="heavy-script.js"></script>
</head>
<body>
    <!-- Контент не появится, пока heavy-script.js не загрузится и не выполнится -->
    <h1>Мой сайт</h1>
</body>
</html```

Последствие: Пользователь видит белый экран до полной загрузки и выполнения скрипта. Для медленных сетей или тяжёлых скриптов задержка может составлять секунды.

2. Ошибки доступа к неподготовленному DOM

Скрипты в <head> выполняются до того, как браузер построил тело документа. Попытка обратиться к элементам DOM, которых ещё не существует, вызовет ошибки.

// script.js, подключённый в <head>
console.log(document.querySelector('.my-element')); // null
document.querySelector('.my-element').style.color = 'red'; // Ошибка!

Для обхода приходится использовать события типа DOMContentLoaded или load, что усложняет код:

document.addEventListener('DOMContentLoaded', function() {
    // Теперь DOM доступен
    document.querySelector('.my-element').style.color = 'red';
});

3. Неоптимальная загрузка ресурсов

Браузер не может параллельно загружать другие ресурсы (изображения, стили) во время выполнения синхронного скрипта. Это нарушает принцип максимального параллелизма современных браузеров, увеличивая общее время загрузки.

4. Проблемы с порядком выполнения

При нескольких синхронных скриптах в <head> они выполняются строго по порядку вставки. Если второй скрипт зависит от первого, а первый — тяжёлый, второй будет ждать, усугубляя блокировку.

<script src="jquery.js"></script> <!-- Большой файл -->
<script src="my-plugin.js"></script> <!-- Зависит от jQuery, но не начнёт загружаться, пока jQuery не выполнится -->

5. Влияние на Core Web Vitals и SEO

Современные метрики производительности (Largest Contentful Paint, First Contentful Paint) напрямую страдают от блокирующих скриптов:

  • LCP задерживается, так как основной контент не отображается.
  • Поисковые системы (например, Google) учитывают скорость загрузки в ранжировании. Медленные страницы получают худшие позиции.

Рекомендуемые альтернативы и решения

Вариант 1: Атрибут defer

  • Скрипты загружаются асинхронно, но выполняются после полного разбора DOM, в порядке их объявления.
  • Идеально для скриптов, зависящих от DOM.
<head>
    <script defer src="analytics.js"></script>
    <script defer src="app.js"></script>
</head>

Вариант 2: Атрибут async

  • Скрипты загружаются и выполняются асинхронно без сохранения порядка.
  • Подходит для независимых скриптов (счётчики, реклама).
<head>
    <script async src="widget.js"></script>
</head>

Вариант 3: Перемещение скриптов перед </body>

  • Классический подход: скрипты выполняются после построения видимого DOM.
  • Гарантирует доступность элементов, но может задержать функциональность.
<body>
    <!-- Весь контент -->
    <script src="app.js"></script>
</body>

Итог

Использование <script> в <head> без async/defer — устаревшая практика, которая ухудшает производительность и UX. Современные проекты должны использовать:

  • defer для большинства скриптов, особенно критичных к DOM.
  • async для независимых сторонних скриптов.
  • Динамическое добавление скриптов через document.createElement('script') для полного контроля.
  • Модули ES6 (<script type="module">), которые по умолчанию ведут себя как defer.

Для legacy-кода, который нельзя изменить, остаётся вариант размещения перед </body> как компромисс между доступностью DOM и производительностью.