Подключение файла скрипта
В рабочем проекте обычно более одного файла с кодом JavaScript.
В любой проекте всегда самым главным является файл index.html. Именно его ищет, видит и считывает браузер. Именно в этот файл поключаются все другие файлы стилей и файлы скриптов.
Вспомним базовую разметку файла index.html
А теперь вспомним, как к нему подключаются файлы стилей (CSS) - внутри тега head.
Важно помнить, что файл скрипта - то есть файл с расширением .js всегда подключается после всей разметки в самый конец тега body - перед его закрывающим тегом.
Как показано на примере:
Если у нас несколько файлов с .js, подключаем их по отдельности, в той последовательности, как они должны работать.
Подключение скриптов
Загрузка и выполнение скрипта указанного в теге <script>
без каких-либо атрибутов, блокируют обработку HTML-документа и построение DOM. Это проблема.
Когда анализатор встречает такой тег, обработка HTML-документа приостанавливается и начинается загрузка файла скрипта указанного в атрибуте src
. После загрузки скрипт выполняется, и только потом возобновляется обработка HTML. Это называется «блокирующий» скрипт.
Атрибуты defer
и async
были введены чтобы дать разработчикам возможность лучше контролировать как загружать скрипты и когда именно их выполнять.
Атрибут defer
defer
Атрибут defer
указывает браузеру загружать файл скрипта в фоновом режиме, паралельно обработке HTML-документа и построению DOM. Скрипт будет выполнен только после того как HTML-документ обработан, а DOM построен. Такие скрипты не блокируют построение DOM-дерева и гарантированно выполняются в том порядке, в котором указаны в HTML-документе.
Атрибут async
async
Загрузка скрипта с атрибутом async
не блокирует построение DOM, но он выполняется сразу после загрузки. Это значит, что такие скрипты могут заблокировать построение DOM, и выполняются в произвольном порядке.
Last updated