Подключение 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
Получите крутое код-ревью от практикующих программистов с разбором ошибок и рекомендациями, на что обратить внимание — бесплатно.
Переходите на страницу учебных модулей «Девмана» и выбирайте тему.