Все, что нужно знать про тег <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
являются устаревшими, использовать их не нужно.