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

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


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

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

DOM дерево еще не будет целиком построено
Пользователь увидит отрисованной лишь верхнюю часть страницы
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>

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

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

Попробуйте бесплатные уроки по Python

Получите крутое код-ревью от практикующих программистов с разбором ошибок и рекомендациями, на что обратить внимание — бесплатно.

Переходите на страницу учебных модулей «Девмана» и выбирайте тему.

Хочу код-ревью