JavaScript — популярный язык программирования, который позволяет добавить веб-сайту интерактивности и динамичности. Чтобы использовать возможности этого языка, сперва его нужно подключить к HTML-документу. В этой статье мы рассмотрим 2 варианта, как добавить JavaScript в HTML, а также обсудим, как правильно это сделать, чтобы не замедлить загрузку сайта.
Способы подключения JavaScript к HTML
Чтобы дать понять браузеру, что ему необходимо выполнить некоторый js-код (также его называют «сценарий» или «скрипт»), на страницу добавляется парный тег script. Все, что находится в пределах этого тега, браузер обрабатывает как JavaScript-код. Тег script обычно помещают либо в теге head, либо в body.
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Подключение js к html</title>
<!-- Подключаем либо здесь... -->
</head>
<body>
<!-- ...либо здесь -->
</body>
</html> Есть 2 известных способа, как подключить JS к HTML:
- Размещение кода прямо в HTML-документе.
- С помощью внешнего js-файла.
JavaScript-код на странице
Самый элементарный способ, как установить скрипт — пишем код прямо на HTML-странице между тегами script. Обычно такой метод используют для небольших сценариев. В практике этот вариант популярен для добавления на веб-ресурс различных счетчиков статистики, аналитики и иных js-кодов для взаимодействия со сторонними ресурсами.
В нашем случае мы рассмотрим однострочный код, который будет отображать в браузере модальное диалоговое окно с простой фразой «Привет! Я JavaScript!». В этом нам поможет JavaScript-функция alert(). В качестве параметра этой функции передадим наш приветственный текст.
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Подключение js к html</title>
</head>
<body>
...
<script> alert('Привет! Я JavaScript!'); </script>
</body>
</html> Увидеть результат выполнения вышеуказанного сценария можно, нажав на кнопку:
Внешний файл JavaScript
Если нам необходимо добавить на страницу значительное количество JavaScript-кода либо подключить js-библиотеку стороннего разработчика, то лучше рассмотреть второй вариант — использование внешнего файла, который имеет расширение js. Помещая код в отдельный js-файл, мы упрощаем разработку, разбивая сайт на структурные части.
Предположим, у нас есть файл script.js с готовым сценарием. Чтобы подключить этот файл в HTML, разместим там следующий код:
<script src="script.js"></script>
Вставим его либо в заголовок (head), либо в тело документа (body).
О том, в каком конкретно месте лучше подключить js-файл, мы поговорим далее.
Наш HTML-код будет выглядеть следующим образом:
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Подключение js к html</title>
</head>
<body>
...
<script src="script.js"></script>
</body>
</html> Хорошие практики подключения JavaScript к HTML
Немаловажным фактором качественного функционирования веб-ресурса является скорость, с которой загружаются его страницы. Оптимальное время появления содержимого после запроса в браузере должно составлять не более трех секунд.
Медленная загрузка сайта сопровождается негативными последствиями:
- Плохо отражается на позиции веб-ресурса в поисковой выдаче. Поисковые системы отдают предпочтение сайтам с более высокой скоростью загрузки.
- Увеличивается количество пользователей, которые не задерживаются на сайте. Посетителям неудобно пользоваться медленным ресурсом. Как следствие, это приводит к большому показателю отказов, на что поисковики также реагируют, снижая позицию в выдаче.
На скорость загрузки может влиять ряд причин. Одна из них — то, насколько правильно встроен JavaScript в HTML. Далее рассмотрим, почему js-сценарии могут замедлять отображение страниц и как подключить Javascript, чтобы работа js-кода на веб-ресурсе была оптимальной.
Порядок исполнения js-файлов
Загружая веб-страницу, браузер читает ее сверху вниз, выстраивая DOM-дерево из содержащихся на ней элементов. Тег script, установленный в заголовке head, будет выполнен в начале загрузки HTML-документа.
Если тег скрипта содержит ссылку на js-файл, браузер сперва скачивает и выполняет js-код по этой ссылке, только затем продолжает обрабатывать оставшуюся часть страницы. В этом случае пользователь не сможет увидеть содержимое, пока сценарий не будет выполнен и браузер не прочитает документ до конца.
Крупные JavaScript-файлы в заголовке являются одной из причин, почему сайт может долго не отображаться. Как запустить JavaScript на сайте, избежав подобной проблемы? Один из вариантов решения — подключить js-код перед закрывающим тегом body.
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Подключение js к html</title>
<!-- Сюда не подключаем -->
</head>
<body>
...
<!-- Подключаем перед закрывающимся тегом "body" -->
<script src="script.js"></script>
</body>
</html> В этом случае сценарий начинает обрабатываться после полного рендеринга страницы, позволяя посетителю увидеть содержимое до завершения работы js-кода. Такое решение приемлемо для старых браузеров, которые ограничены в способах подключения скрипта. Недостаток этого варианта — браузер будет вынужден выполнить скрипт после отображения содержимого, что в случае с большими HTML-документами добавит задержки.
Как же наиболее эффективно повлиять на увеличение скорости загрузки? Самое правильное и современное решение — асинхронная загрузка.
Асинхронная загрузка JavaScript
Благодаря асинхронной загрузке, подключенные в HTML внешние js-файлы не блокируют построение DOM-дерева. Чтобы указать js-файлу загружаться асинхронно, тегу script необходимо добавить один из следующих атрибутов: async или defer.
Рассмотрим, как использовать скрипты с этими атрибутами, и выделим их особенности.
Атрибут async
Атрибут async обладает полной независимостью. Он не ждет, когда содержимое страницы обработается и отрисуется.
Порядок расположения js-файлов с этим атрибутом в HTML относительно друг друга не имеет значения — они выполняются обособленно. Этот момент нужно учесть, когда мы собираемся подключить такой скрипт на сайт: файлы с атрибутом async не должны зависеть один от одного, так как невозможно знать, в каком порядке они будут выполняться, что может привести к ошибкам на ресурсе.
<script src="script.js" async></script>
Атрибут defer
В отличие от async, скрипты с атрибутом defer выполняются строго в том порядке, в котором они находятся на странице. Поэтому можно не беспокоиться об их взаимной зависимости.
Еще одно отличие этих атрибутов заключается в том, что после того, как такой файл с defer загрузился, браузер не сможет запустить скрипт до тех пор, пока HTML-документ не будет полностью обработан.
<script src="script.js" defer></script>
Подытожив, сравним особенности исследуемых атрибутов, выделив их в отдельную таблицу:
| Не блокируют рендеринг содержимого | Важен порядок расположения на странице | Выполняются строго после обработки документа | |
|---|---|---|---|
async | Да | Нет. Загружаются и отрабатываются независимо | Нет. Может загрузиться до или после, в зависимости от размеров самого js-кода и документа |
| defer | Да | Да. Выполняются в порядке размещения в документе | Да |
Получилось ли у вас подключить JS к HTML? Поделитесь в комментариях!