Подключение JavaScript кода

JavaScript может быть встроен в HTML документ с помощью тега <script>. Пример:

<!DOCTYPE html>
<html>
    <head>
      <title>Страница с JS кодом</title>
    </head>
    <body>
        <script type="text/javascript">
          alert('Hello World!')
        </script>
    </body>
</html>

Такие вставки кода будут исполняться по мере того как браузер встречает их в HTML документе. На время исполнения кода браузер приостановит парсинг и отрисовку страницы. А это значит что:

  1. DOM дерево еще не будет целиком построено
  2. Пользователь увидит отрисованной лишь верхнюю часть страницы
  3. JS код не сможет работать с тегами из нижней части документа

Можно подключить JavaScript код по URL адресу, таким образом:

<script src="http://example.com/jquery.js"></script>

Встретив такой тег в HTML документе браузер приостановит парсинг страницы дожидаясь окончания скачивания файла из сети, его разбора и исполнения JS кода. По этой причине стараются подключать JS файлы в конце HTML документа, как можно ближе к закрывающему тегу </body>. Так пользователь увидит отрисованную страницу раньше чем успеет загрузиться и выполниться весь необходимый JS код. Быстрым в работе сайтом приятно пользоваться, за это стоит бороться.

Полезно пользоваться популярными CDN для подключения библиотек jquery, lodash и пр. Браузеры кэшируют такие файлы, что снижает нагрузку на канал пользователя, увеличивает скорость отрисовки страницы, ведь теперь не нужно ждать скачивания файла. Пример:

<script src="http://code.jquery.com/jquery-3.1.1.min.js"
        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous"></script>

Другие полезные приемы:

  1. Атрибут async для асинхронного подключения JS файлов. Так подключают Яндекс Метрику, Google Analytics и не только;
  2. Склейка нескольких JS файлов в один. Для этого используют специальные инструменты коих развелось пруд пруди: Webpack, Gulp, Grunt;
  3. Минификация JS кода. Выкидываются пробелы и комментарии, меняются названия переменных на более короткие, происходит еще много разной магии. Эта процедура также требует спец.инструментов;
  4. Кэширование JS файлов в браузере навечно с одновременным версионированием — добавлением в имя файла хэша: jquery.kjb234kjb23.js. При любом изменении JS кода создается новый файл c новым хэшом в названии.