Как подключить JS к HTML
Когда браузер читает HTML-страничку и составляет DOM Tree и видит <script>
, то он первым делом читает и выполняет JS код, а только потом продолжает парсить страницу дальше.
DOM (Документно-объектная модель) - схема объектов, созданных из HTML элементов браузером в процессе парсинга страницы перед рендером. JS-код работает с DOM элементами, а не конечным HTML.
Чтобы подключить к условному HTML файлу JavaScript файл main.js, в HTML код нужно вставить строку:
<script src="main.js"></script>
JavaScript код будет выполнен непосредственно после того, как парсинг html дойдёт до тега <script>
. Поэтому обычно JS файлы подключают в <head>
, если JS не меняет DOM, или же перед закрытием </body>
, если он работает с DOM. Например, jquery подключат в начале страницы, а скрипт, использующий библиотеку, в конце.
Async и defer
В браузерах новее IE 10 (97.45% устройств) появляются другие методы подключения JavaScript.
<script defer src="...">
- JS код будет загружаться параллельно HTML, но выполнится только после окончания парсинга. То есть мы можем подключить код, меняющий DOM в любом месте страницы.<script async src="...">
- JS код загрузится параллельно HTML и выполнится сразу после загрузки, не ожидая готовность DOM дерева.
Если вы только начинаете разбираться в JavaScript, то вам вряд ли придётся использовать <script async>
, но последние два метода подключения позволяют заметно ускорить загрузку страницы за счёт параллельной загрузки/исполнения HTML и JS.
Динамические скрипты
Также можно подключить JavaScript из другого JavaScript файла путём модификации DOM:
let script = document.createElement('script'); script.src = "/somefile.js"; document.body.append(script); // (*)
Загрузка скрипта начнётся как только элемент будет добавлен к дереву, по умолчанию он будет загружен как async
.
В этой статье мы рассмотрели четыре способа подключения JavaScript файлов к HTML, если кратко: чистый script выполняется здесь и сейчас, defer после загрузки документа, async может быть выполнен в любой момент времени, динамическая загрузка для скриптов, которые не включены в HTML.