Подключение библиотеки jQuery. 4 способа
Подключать библиотеку jQuery
Способ 1. Скачать в папку и подключить файл
Наиболее распространённый способ, если сайт могут просматривать локально, без подключения сети Интернет (неужели такие еще есть?).
Идем по адресу и жмем большую желто-оранжевую кнопку Download jQuery. Переходим на страницу где выбираем версию jQuery. Желательно выбирать последнюю из доступных (на момент написания статьи – это 2.2.3). Обозначение compressed – означает, что библиотека минимизирована, т.е. занимаем минимум места, но, к сожалению, читать исходных код трудно. Качаем! После сохранения подключаем файл библиотеки. Для моей структуры (все скрипты лежат в папке js), код выглядит следующим образом:
<!DOCTYPE html>
<html lang=»en»>
<head>
<meta charset=»UTF-8″>
<title>Document</title>
<!—Подключаем библиотеку—>
<script src=»js/jquery-2.2.3.min.js»></script>
</head>
<body>
</body>
</html>
|
<!DOCTYPE html> <html lang=»en»> <head> <meta charset=»UTF-8″> <title>Document</title> <!—Подключаем библиотеку—> <script src=»js/jquery-2.2.3.min.js»></script> </head> <body> </body> </html> |
Так выглядит структура проекта, библиотеку jQuery скачали в папку
В некоторых случаях, библиотеку подключают перед закрывающимся тегом , что связанно с порядком обработки html страницы браузером. Поскольку браузер вычитывает строки последовательно, то при подключении jQuery в конце файла вначале браузер отобразит сайт, а затем уже подключит динамику. При медленном соединении, такой подход обеспечивает увеличение скорости загрузки сайта, и уже потом работу слайдеров и остального. Код при таком подключении выглядит:
<!DOCTYPE html>
<html lang=»en»>
<head>
<meta charset=»UTF-8″>
<title>Document</title>
</head>
<body>
<!—Подключаем библиотеку—>
<script src=»js/jquery-2.2.3.min.js»></script>
</body>
</html>
|
<!DOCTYPE html> <html lang=»en»> <head> <meta charset=»UTF-8″> <title>Document</title> </head> <body> <!—Подключаем библиотеку—> <script src=»js/jquery-2.2.3.min.js»></script> </body> </html> |
Какой из способов лучше? Это вопрос философии и привычки. Второй способ, используется в фреймворке materialize.
Способ 2. Подключаем напрямую с CDN
Данный способ хорош тем, что библиотека подключается с сайта и не валяется на жестком диске. Особенно это актуально при большом количестве маленьких проектов и для обучения.
<script src=»https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js»></script>
и подключить ее в файл. Выглядит это так:
<!DOCTYPE html>
<html lang=»en»>
<head>
<meta charset=»UTF-8″>
<title>Document</title>
<!—Подключаем библиотеку—>
<script src=»https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js»></script>
</head>
<body>
</body>
</html>
|
<!DOCTYPE html> <html lang=»en»> <head> <meta charset=»UTF-8″> <title>Document</title> <!—Подключаем библиотеку—> <script src=»https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js»></script> </head> <body> </body> </html> |
Второй способ подключения, перед закрывающимся тегом body:
<!DOCTYPE html>
<html lang=»en»>
<head>
<meta charset=»UTF-8″>
<title>Document</title>
</head>
<body>
<!—Подключаем библиотеку—>
<script src=»https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js»></script>
</body>
</html>
|
<!DOCTYPE html> <html lang=»en»> <head> <meta charset=»UTF-8″> <title>Document</title> </head> <body> <!—Подключаем библиотеку—> <script src=»https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js»></script> </body> </html> |
Все просто!
jQuery — Как подключить jQuery?
Подключаем jQuery со страницы своего сайта
И так, ситуация первая
Предположим, что у Вас есть сайт (не важно где, на локальном или реальном хостинге). Вы сами пишете этот сайт или его страницу, то есть не используете никаких CMS (систем управления сайтом), как WordPress
И вот, Вы хотите подключить jQuery на некую веб-страницу, и эта библиотека должна загружаться с Вашего сайта.
1. Загружаем свежую версию jQuery
Самое первое, что стоит сделать, это скачать её свежую версию с сайта разработчика. Там, сразу на главной странице, нам предложат 2 варианта jQuery (PRODUCTION и DEVELOPMENT). По функциональности эти варианты идентичны. Вариант “DEVELOPMENT” («разработка») — это, грубо говоря, исходный код этой библиотеки, он структурирован в удобном для чтения виде с кучей комментариев, и предназначен в первую очередь для разработчиков, которые захотят посмотреть, как всё устроено внутри jQuery, что-то там изменить или найти ошибки. Вариант “PRODUCTION” — это сжатый вариант библиотеки, оттуда удалены все комментарии, и этот вариант занимает намного меньше места (32Кб против 250Кб), следовательно страница, на которую будет подключена эта библиотека, будет загружаться быстрее. Так что советую Вам выбрать именно эту версию. Затем надо будет нажать кнопку «Download». Скорее всего, перед Вами появиться jQuery в текстовом виде, и библиотеку можно будет сохранить в нужное место через меню браузера «Сохранить страницу как».
2. Закачиваем jQuery на сайт
Затем библиотеку необходимо «положить» в какое-то место на сайте, то есть закачать на сайт. Если Вы используете реальный хостинг, то сделать это можно, загрузив jQuery через панель управления сайта, или же через FTP. Далее будем считать, что в главной директории Вашего сайта есть поддиректория “javascript”, в которую складываются всякие библиотеки, и jQuery Вы тоже положили туда.
Если Вы используете локальный хостинг типа Денвера, тогда тоже можно создать директорию “javascript” в корневом каталоге Вашего сайта, и скопировать туда библиотеку.
3. Создаём веб-страницу и вставляем туда ссылку на jQuery
Структура веб-страницы, на которую Вы подключаете jQuery, может быть разной. Но в ней обязательно присутствуют теги HTML, HEAD и BODY. Так вот, подключить jQuery можно, если добавить тег SCRIPT со ссылкой на библиотеку внутрь тега HEAD.
<script type="text/javascript" src="javascript/jquery-1.7.2.min.js"></script>
После добавления, Ваша страница может иметь такой вид:
<!DOCTYPE html> <html dir="ltr" lang="ru-RU"> <head> <meta charset="utf-8" /> <title>Страница, на которую я подключаю jQuery</title> <script type="text/javascript" src="javascript/jquery-1.7.2.min.js"></script> </head> <body> Контент моей страницы </body> <html>
Значение атрибута SRC тега script указывает на путь к внешнему JavaScript, который необходимо подключить на страницу. Обычно так подключается любой внешний JavaScript (хотя не обязательно вставлять тег SCRIPT именно в секцию HEAD, но так принято делать). В нашем случае внешним JavaScript-ом является библиотека jQuery
На момент написания статьи последняя версия jQuery — 1.7.2, но когда Вы будете читать эту статью, ситуация может измениться, следовательно, обратите внимание на имя скачанного файла js и подставьте его в код
Особенности Google CDN / Хабр
С помощью этого кода вы можете загрузить библиотеку jQuery напрямую из сети доставки контента (CDN) Google.
Обратите внимание, вы можете прямо указать какую версию (/1.4.4/) библиотеки следует загрузить. Но это далеко не все, что можно сделать
Путем простого изменения этой части ссылки можно творить маленькие приятности:
/1.4.4/ – загрузит точно указанную версию библиотеки, которая никогда не изменится.
/1.4/ – прямо сейчас загрузит версию 1.4.4, но если завтра выйдет версия 1.4.5, то эта ссылка будет указывать на нее. Если затем появится 1.5, то будет указывать на последний релиз в ветке 1.4.х.
/1/ – прямо сейчас загрузит версию 1.4.4. Если завтра появится 1.5, то будет указывать на нее. После выхода версии 2.0 будет указывать на последний релиз в jQuery 1.х.
Маленькое напоминание о том, ради чего все это вообще делается
Уменьшаем задержки – файл грузится с ближайшего географически сервера.
Распараллеливаем загрузку – браузеры ограничивают число одновременных подключений к одному домену, а так файлы могут грузиться параллельно, ускоряя загрузку.
Улучшаем кеширование – есть большая вероятность, что в браузерном кеше посетителя файл уже лежит и это скорейший способ загрузить его.
Сохраняем траффик – сжатая версия 1.4.4 «весит» 82 килобайта. Если ваши посетители запросят миллион страниц с пустым кешем браузера, вы сэкономите 74 гигабайта трафика.
Кеширование
Тут следует сделать важное замечание. От того, по какой ссылке вы будете загружать библиотеку, зависит тип кеширования
Только ссылка на прямую версию даст наилучший результат.
/1.4.4/ – public, max-age=31536000 (один год)
/1.4/ – public, must-revalidate, proxy-revalidate, max-age=3600 (один час с перепроверкой)
/1/ – public, must-revalidate, proxy-revalidate, max-age=3600
Очевидно, кешировать на один час совершенно бесполезно. С другой стороны, пи выходе версии 1.4.5 тот, кто закешировал 1.4.4 на год, получал бы несвежую версию, а это тоже не очень хорошо.
Учет факторов задержек, параллельности загрузки и сохранения траффика по-прежнему важен, но кеширование не менее значимо. Так что если уж кеширование играет для нас большую роль, используйте вариант ссылки на строго определенную версию.
Что выбрать
/1.4.4/ – никогда не изменится, никогда не разрушит функционал, лучше всех кешируется, интуитивно понятно
/1.4/ – может привести к нарушению работы кода при обновлениях, плохо кешируется.
/1/ – весьма вероятно, приведет к нарушению работы при обновлении, плохо кешируется.
Таким образом, для большинства сценариев применения наилучшим образом подойдет вариант с жестким указанием версии. Это также позволит держать работу вашего сайта или приложения под контролем.
Не забудьте, конечно, объединить и все свои скрипты. Прописная истина: один файл загружать всегда лучше, чем несколько.
Не jQuery единым
Приведенные выше соображения справедливы для всех библиотек в Google CDN. Автор проверил их в отношении MooTools и все работает аналогичным образом.
Другие CDN
JQuery можно забирать из сети Microsoft или с jquery.com. Они не дают большой свободы при выборе версий, но, стоит отметить, Майкрософт позволяет кешировать файл на год:
jQuery.com не указывает как кешировать его файл:
Update 1.
Поддерживайте отечественного производителя с обширным списком библиотек: api.yandex.ru/jslibs
Update 2.
Такая загрузка позволит поисковикам использовать этот инструмент как дополнительный источник статистики посещений тех или иных сайтов, если кого-то это смущает.
Кеширование даже на год часто не имеет смысла, т.к. размер браузерного кеша у многих пользователей мал. У меня в Файрфоксе и Опере по умолчанию стояло 50 и 40 мегабайт соответственно. При таких размерах и нынешних скоростях доступа он будет обновляться очень часто ввиду вытеснения старых элементов новыми. Я увеличиваю размеры кешей до 500 мегабайт, хотя некоторые авторы предпочитают думать, что это сильно снижает быстродействие браузеров.
Update 3. Передаваемый трафик
Опыты с ФайрБагом показали, что минимальный траффик дает загрузка jQuery из CDN Yandex.st, а Микрософт еще зачем-то подсовывает плюшку:
| Yandex.st | Google CDN | Microsoft CDN |
24605 bytes, gzip
27100 bytes, gzip
34187 bytes, gzip + 1090 bytes cookie
Update 4. Скорость отклика
Замеры производились в Краснодаре (Билайн) вручную посредством Yslow путем 10-кратного рефреша. В других городах результаты могут разительно отличаться. В скобках время первого отклика с чистым кешем.
| Yandex.st | Google CDN | Microsoft CDN |
| ~53 мс (305-320 мс) | ~110 мс (324-333 мс) | ~400 мс (720-990 мс) |
