Всем привет! Я новичок в веб-разработке и никак не могу понять, куда правильно вставлять скрипты в HTML-документе. В разных уроках видел разные варианты: одни пишут скрипты в , другие — в конце . Я пробовал оба варианта, но сталкиваюсь с проблемами. Вот пример. У меня есть простой скрипт, который меняет текст в заголовке: ```javascript document.getElementById('title').textContent = 'Новый заголовок'; ``` Если я вставляю этот скрипт в : ```html Старый заголовок ``` То в консоли браузера появляется ошибка: "Cannot read properties of null (reading 'textContent')". А если перенести скрипт в конец — всё работает. Но я слышал, что если скриптов много, то их размещение в может ускорить загрузку страницы. Или наоборот — замедлить? Ещё видел, что кто-то использует атрибуты async и defer. Объясните, пожалуйста, как правильно расставлять теги и в каких случаях какой вариант лучше? Хочется понять не просто "как делать", а "почему это работает именно так". Почему возникает ошибка и как работает загрузка скриптов Ошибка, которую вы получили, связана с тем, что браузер обрабатывает HTML-документ сверху вниз. Когда скрипт находится в <head>, браузер загружает и выполняет его до того, как будет построен DOM (Document Object Model). В этот момент элемента с id="title" ещё не существует, поэтому document.getElementById('title') возвращает null. Отсюда и ошибка. Когда же скрипт расположен в конце <body>, браузер сначала парсит весь HTML, создаёт DOM, и только потом выполняет скрипт. Элемент уже существует — код работает. Основные варианты размещения скриптов Рассмотрим три главных подхода: В конце <body> — самый простой и надёжный способ для начинающих. Скрипты выполняются после полной загрузки DOM. Минус: страница может отображаться до выполнения скрипта, что иногда вызывает визуальные скачки (Flash of Unstyled Content, FOUC). В <head> с атрибутом defer — скрипт загружается параллельно с парсингом HTML, но выполняется только после того, как DOM полностью построен. Это лучший вариант для скриптов, которые не должны блокировать отрисовку страницы. В <head> с атрибутом async — скрипт загружается параллельно и выполняется сразу после загрузки, не дожидаясь завершения парсинга HTML. Подходит для независимых скриптов (например, аналитика, реклама). Примеры кода Исправленный вариант с defer: <!DOCTYPE html> <html> <head> <script src="script.js" defer></script> </head> <body> <h1 id="title">Старый заголовок</h1> </body> </html> Вариант с размещением в конце <body>: <!DOCTYPE html> <html> <head>  </head> <body> <h1 id="title">Старый заголовок</h1> <script src="script.js"></script> </body> </html> Рекомендации по выбору Для скриптов, которые манипулируют DOM (ваш случай) — используйте defer в <head> или ставьте скрипты в конец <body>. defer предпочтительнее, так как браузер может начать загрузку скрипта раньше. Для независимых скриптов (счётчики, аналитика) — async в <head>. Они выполнятся как только загрузятся, не блокируя страницу. Для критически важного кода (стилизация до отрисовки) — можно разместить inline-скрипт в <head> без атрибутов, но с осторожностью, так как он блокирует парсинг. Помните: современные браузеры поддерживают defer и async для внешних скриптов. Для inline-скриптов (код прямо в HTML) эти атрибуты не работают — такие скрипты всегда выполняются синхронно. Если хотите использовать inline-код без блокировки, оборачивайте его в DOMContentLoaded: <script> document.addEventListener('DOMContentLoaded', function() { document.getElementById('title').textContent = 'Новый заголовок'; }); </script> В итоге: для большинства случаев используйте defer в <head> — это даёт лучшую производительность и гарантирует, что DOM будет готов. Если поддерживаете старые браузеры (IE9-), ставьте скрипты в конец <body>. Альтернативный подход: динамическая загрузка скриптов Помимо статического размещения тегов <script>, можно управлять загрузкой скриптов через JavaScript. Это даёт полный контроль над порядком выполнения и позволяет загружать скрипты по требованию. Пример динамической загрузки: function loadScript(src, callback) { let script = document.createElement('script'); script.src = src; script.onload = () => callback(null, script); script.onerror = () => callback(new Error('Ошибка загрузки ' + src)); document.head.append(script); } // Использование loadScript('script.js', (err, script) => { if (err) { console.error(err); } else { console.log('Скрипт загружен'); // Здесь можно вызывать функции из загруженного скрипта } }); Этот подход особенно полезен для: Ленивой загрузки (lazy loading) — скрипты подгружаются только когда они нужны (например, после взаимодействия пользователя). Условной загрузки — например, загружать разные скрипты в зависимости от разрешения экрана или браузера. Избежания блокировки основного потока — скрипты загружаются асинхронно, не мешая отрисовке страницы. Минус: такой код сложнее поддерживать, и он может создать проблемы с индексацией поисковыми системами. Для простых проектов лучше придерживаться стандартных атрибутов defer и async.

js_student64 · 09.05.2026

Правильное расположение тегов <script> в HTML: где и почему?

Всем привет! Я новичок в веб-разработке и никак не могу понять, куда правильно вставлять скрипты в HTML-документе. В разных уроках видел разные варианты: одни пишут скрипты в , другие — в конце . Я пробовал оба варианта, но сталкиваюсь с проблемами. Вот пример. У меня есть простой скрипт, который меняет текст в заголовке: ```javascript document.getElementById('title').textContent = 'Новый заголовок'; ``` Если я вставляю этот скрипт в : ```html

Старый заголовок

``` То в консоли браузера появляется ошибка: "Cannot read properties of null (reading 'textContent')". А если перенести скрипт в конец — всё работает. Но я слышал, что если скриптов много, то их размещение в может ускорить загрузку страницы. Или наоборот — замедлить? Ещё видел, что кто-то использует атрибуты async и defer. Объясните, пожалуйста, как правильно расставлять теги

Правильное расположение тегов <script> в HTML: где и почему?

Старый заголовок

Похожие вопросы