Для добавления скриптов на страницу используется элемент
<script>. При этом скрипты бывают разных видов, что влияет на их поведение и загрузку.<script>Классический скрипт. Выполняется сразу же при обнаружении парсером и блокирует его.
<script type="not-javascript">Если значение атрибута
type не равно одному из MIME-типов JS или одному из ключевых слов, то это блок данных. Код в теле <script> не обрабатывается и не выполняется, что можно использовать для хранения данных.<script src="/script.js">Как классический скрипт, но загружается внешний файл. Во время загрузки и обработки парсер блокируется. Тело элемента
<script> с атрибутом src игнорируется, даже если там JS. Поэтому внутри можно оставить комментарии и пояснения. <script src="/script.js" async>Атрибут
async делает скрипт асинхронным и работает только с внешними файлами. Асинхронные скрипты загружаются при обнаружении парсером, но не блокируют его во время загрузки. Скрипты выполняются и блокируют парсер как только загрузятся.<script src="/script.js" defer>Атрибут
defer не блокирует парсер во время загрузки скрипта, но откладывает выполнение до момента готовности DOM. Отложенные скрипты выполняются в том же порядке, в котором они расположены в HTML, что отличает defer от async.<script src="/script.js" async defer>Если у скрипта одновременно указаны атрибуты
async и defer, то defer игнорируется. Поведение будет таким же, как у <script src="/script.js" async>.<script src="/script.js" type="module">Скрипт с атрибутом
type="module" обрабатывается как ES-модуль, где работают операторы import и export. Такие скрипты не блокируют парсер во время загрузки и выполняются по готовности DOM, при этом все зависимые модули должны загрузиться.<script src="/script.js" type="module" async></script>Модульный скрипт с атрибутом
async и все его зависимые модули загружаются параллельно и не блокируют парсер. Модуль выполнится сразу, как только будет загружена самая последняя зависимость.<script src="/script.js" nomodule></script>Атрибут
nomodule сообщает браузерам с поддержкой ES-модулей, что скрипт классический и его не нужно загружать и обрабатывать. nomodule используется в сочетании с модульными скриптами для создания резервного варианта для старых браузеров.<script type="importmap">Атрибут
type="importmap" сообщает браузеру, что тело скрипта — карта импортов. Это JSON-объект с псевдонимами путей к модулям, которые используются в операторах import и export. В современных браузерах можно определить несколько карт импортов.<script type="speculationrules">Атрибут
type="speculationrules" сообщает браузеру, что тело скрипта — правила спекулятивной загрузки. Браузеры заранее загружают страницы при выполнении указанных условий, что приводит к мгновенной загрузке страниц и ресурсов.Атрибуты
src, async, nomodule и defer не должны применяться для type="not-javascript", type="importmap" и type="speculationrules", поэтому их использование не окажет никакого влияния.#ydkhtml #js