В веб‑разработке тег script - элемент HTML, позволяющий запускать JavaScript‑код непосредственно в документе или подключать внешние файлы. Он - один из самых используемых способов добавить интерактивность на страницу.
Тег script нужен почти в любой динамичной веб‑странице: от простых анимаций до сложных одностраничных приложений.
Что именно делает тег script?
Когда браузер встречает тег script, он переключает режим разборки HTML в режим выполнения JavaScript. Код может быть встроенным (inline) или загружаться из внешнего файла через атрибут src. После выполнения скрипт может манипулировать DOM, реагировать на события, отправлять запросы и многое другое.
Где размещать тег script?
Традиционно скрипты помещали в <head>, но это замедляет отрисовку страницы, потому что браузер останавливает построение DOM, пока не загрузит и не выполнит скрипт. Современный подход - ставить тег в конец <body> или использовать атрибуты async и defer, которые позволяют параллельно загружать ресурсы.
Подключение внешних скриптов через src
Для повторного использования кода и уменьшения размера HTML часто применяют внешний файл:
<script src="/js/app.js"></script>Атрибут src принимает URL, который может быть абсолютным или относительным. При загрузке браузер сначала скачивает файл, затем исполняет его в контексте текущей страницы.
Атрибуты async и defer: когда и какой использовать
Оба атрибута позволяют не блокировать построение DOM, но работают по‑разному:
| Атрибут | Когда загружается | Когда выполняется | Подходит для |
|---|---|---|---|
| async | Загружается параллельно с разбором HTML | Запускается сразу после загрузки, до завершения построения DOM | Независимые скрипты, аналитика, рекламные пиксели |
| defer | Загружается параллельно с разбором HTML | Запускается после полной постройки DOM, в порядке появления в документе | Код, зависящий от DOM, модули приложения |
Если скрипт не взаимодействует с элементами страницы, лучше ставить async. Если нужен доступ к уже построенному DOM, выбирайте defer.
Типы скриптов: type и module
По умолчанию браузер считает содержимое тег script JavaScript‑ом. Атрибут type позволяет менять интерпретатор. Самый актуальный вариант - использовать модульный синтаксис:
<script type="module" src="/js/main.mjs"></script>Модули поддерживают import/ export, изолируют область видимости и автоматически работают в режиме strict. Если нужен старый способ, указывают type="text/javascript", но это уже избыточно.
Влияние загрузки скриптов на производительность
Неправильное размещение скриптов может привести к «зависанию» страницы, особенно на мобильных устройствах с медленным соединением. Совет: комбинировать несколько мелких файлов в один, использовать минификацию и кешировать через HTTP‑заголовки. Кроме того, важно проверять размер загружаемых библиотек; иногда достаточно подключить только нужные функции вместо полного пакета.
Безопасность: CSP и Subresource Integrity
Современные сайты защищаются с помощью Content Security Policy (CSP). Политика позволяет указать, откуда браузер может загружать скрипты:
Content-Security-Policy: script-src 'self' https://cdn.example.com;Для внешних CDN удобно добавить атрибут integrity (Subresource Integrity). Он содержит хеш загрузки, и браузер проверит неизменность ресурса:
<script src="https://cdn.jsdelivr.net/npm/vue@2" integrity="sha384-..." crossorigin="anonymous"></script>Таким образом, даже если CDN будет скомпрометирован, вредоносный код не выполнится.
Практические советы и типичные ошибки
- Не ставьте тег script внутрь
<title>или внутри атрибутов - это приведёт к синтаксическим ошибкам. - Избегайте использования
document.write()после полной загрузки страницы - это перезаписывает весь документ. - Если скрипт нужен только для определённого браузера, используйте условные комментарии или проверку
if (window.Promise)вместо отдельного файла. - Не забывайте задавать
type="module"для современных ES‑модулей - иначе браузер не поймётimport/export. - Для больших проектов включайте сборщики (Webpack, Vite) - они автоматически разбивают код на чанки и ставят нужные атрибуты.
Краткие выводы
- Тег script - основной способ добавить JavaScript на страницу.
- Размещайте скрипты в конце
bodyили используйтеasync/deferдля ускорения загрузки. - Для модульного кода указывайте
type="module". - Защитите внешние скрипты с помощью CSP и атрибута
integrity. - Следите за размером и количеством файлов - оптимизация повышает скорость.
Часто задаваемые вопросы
Можно ли разместить несколько тегов script подряд?
Да, браузер выполнит их в том порядке, в котором они встречаются в документе, если не указаны атрибуты async или defer. При использовании этих атрибутов порядок может измениться в зависимости от скорости загрузки.
Что произойдет, если забыть закрыть тег script?
Браузер будет считать весь оставшийся HTML‑контент частью JavaScript‑кода, что приведёт к ошибкам парсинга и полной потере разметки страницы.
Можно ли подключить CSS‑файл через тег script?
Нет. Для стилей используется тег <link rel="stylesheet"> или <style>. Попытка загрузить CSS через script вызовет ошибку.
Как проверить, работает ли атрибут defer?
Откройте инструменты разработчика, поставьте точку останова в начале скрипта и посмотрите, вызывается ли она после события DOMContentLoaded. Если да - defer работает корректно.
Что делать, если скрипт не загружается из CDN?
Проверьте консоль на ошибки CORS и CSP. Убедитесь, что в заголовке Access-Control-Allow-Origin разрешён ваш домен, а политика CSP допускает загрузку из данного источника.
