Все, что нужно знать про тег <script>

Все, что нужно знать про тег <script>

Maksym Pohribniak

Элемент script позволяет включать в свои документы скрипты выполняемые на стороне пользователя. Так же, данный тег, используют для включения блоков данных. Блоки данных могут выглядеть следующим образом:

<script type="text/x-game-map">
........U.........e
o............A....e
.....A.....AAA....e
.A..AAA...AAAAA...e
</script>

Элемент script  не представляет контент для пользователя и невидим на странице.
Обычные скрипты
и скрипты модулей могут быть встроены или импортированы из внешнего файла с использованием атрибута src, в котором должен быть указан URL-адрес внешнего ресурса сценария для использования.

При использовании блоков данных, контент должен быть встроен в документ. Любые другие атрибуты, кроме type, для блоков данных указывать нельзя.

Атрибут type позволяет настраивать тип представленного скрипта:

  • Пропуск атрибута, установка ему значение пустой строки или установка на JavaScript MIME type значает, что сценарий является обычным сценарием, который будет интерпретироваться как JavaScript код.
    На данные скрипты влияют атрибуты async и defer, но только если установлен атрибут src. Cледует опускать атрибут типа (type) вместо его избыточной установки.
  • Установка для атрибута занчения "module" означает, что сценарий является сценарием модуля. Который должен интерпретироваться в как модуль JavaScript. На скрипты модуля не влияет атрибут defer, но на них влияет атрибут async (независимо от состояния атрибута src).
  • Установка для атрибута любого другого значения означает, что сценарий представляет собой блок данных (data block), который не обрабатывается. Ни один из атрибутов скрипта (кроме самого типа) не влияет на блоки данных.

Атрибуты async и defer являются логическими атрибутами, которые указывают, как следует исполнять сценарий. Есть несколько возможных режимов, которые можно использовать с помощью этих атрибутов и в зависимости от типа скрипта.

Для классических скриптов:

  • Если присутствует атрибут async, скрипт будет извлекаться параллельно с синтаксическим анализом и оцениваться, как только он станет доступен.
  • Если присутствует атрибут defer, тогда скрипт будет извлекаться параллельно и выполняться, когда страница завершит синтаксический анализ.
  • Если ни один из атрибутов не указан, то сценарий загружается и выполняется немедленно, блокируя синтаксический анализ, пока они оба не будут завершены.

Для модулей:

  • Если присутствует атрибут async, то сценарий модуля и все его зависимости будут извлечены параллельно с синтаксическим анализом, и сценарий модуля будет выполнен, как только он станет доступен (возможно, до завершения синтаксического анализа).
  • В противном случае сценарий модуля и его зависимости будут извлечены параллельно с синтаксическим анализом и он выполнится после завершения обработки страницы.

Все это показано на следующей схеме:

Атрибут defer может быть указан вместе с async, чтобы старые веб-браузеры, которые поддерживают только defer, использовали к его поведение вместо поведения блокировки по умолчанию.

Атрибут nomodule – это логический атрибут, который предотвращает выполнение сценария в браузерах поддерживающих сценарии модуля. Это позволяет выборочно выполнять скрипты модуля в современных браузерах и ​​обычные скрипты в старых браузерах.

Атрибут crossorigin определяет, используется ли CORS при загрузке скрипта (только для внешних скриптов, которые загружаются с использованием атрибута src):

  • anonymous (используется по умолчанию, если данный атрибут не указан или не распознан) не передаются параметры доступа (такие как: cookie, сертификат, логин/пароль для базовой аутентификации по HTTP)
  • use-credentials параметры доступа передаются

Атрибут intergity cодержит хэш контента, который содержит файл загружаемый по ссылке. Это полезно для предотвращения изменения содержимого тега script извне. Хэш контента загружаемого извне, должен соответствовать хэшу, указанном в данном атрибуте. Атрибут целостности не должен указываться, если не указан атрибут src.

Атрибут referrerpolicy позволяет указать, куда можно делать запросы из данного скрипта В большинстве случаев он совсем неважен, в некоторых случаях, с целью большей безопасности, имеет смысл его указывать.

Атрибуты language и  charset являются устаревшими, использовать их не нужно.

Report Page