Особенности Google CDN / Хабр
Сначала посмотрите на это:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
С помощью этого кода вы можете загрузить библиотеку 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. Они не дают большой свободы при выборе версий, но, стоит отметить, Майкрософт позволяет кешировать файл на год:
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.4.min.js"></script>
jQuery.com не указывает как кешировать его файл:
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
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 мс) |
Как подключить JQuery CDN или Google, возможности библиотеки
Подключить библиотеку JQuery к сайту несколькими способами. Один из самых быстрых и простых способов — использовать возможности CDN. Подключение JQuery, используя CDN, в ряде случаев будет даже лучше, чем традиционный способ, при котором нужно скачивать эту библиотеку и монтировать ее в свой проект.
JQuery — это библиотека, основанная на JavaScript, которая в свое время была одним из самых популярных JS-инструментов. Она преследует простую цель — «пиши меньше, но разрабатывай больше». Благодаря такому подходу она и обрела должную популярность среди веб-разработчиков.
CDN — это специальная технология для быстрой доставки контента пользователям. Ее идея простая: создать сеть серверов по всему миру, чтобы максимально приблизить серверы к своим пользователям. Когда пользователь будет запрашивать контент, он получит его с географически ближайшего сервера, что увеличит скорость загрузки контента. Идея простая, и ей активно пользуются крупные IT-компании, например, такие как:
Яндекс;
Google;
Microsoft;
Apple;
Amazon;
и др.
У кого-то сеть серверов побольше, у кого-то поменьше.
Что такое JQuery с CDN
JQuery — это библиотека для веб-разработки. Вот несколько ее особенностей:
более компактный код, по сравнению с «чистым JavaScript»;
более понятный синтаксис, по сравнению с JS;
кроссбраузерность, которая гарантирует, что код с использованием JQuery будет функционировать в любом известном браузере;
бесплатный инструмент с открытым исходным кодом;
и др.
Главный недостаток JQuery — это уменьшение скорости загрузки веб-страницы. То есть программа, написанная на JQuery, функционирует чуть медленнее, чем программа, созданная с помощью «ванильного» JavaScript. Во время выхода этой библиотеки, а это был 2006 год, данный недостаток не считался критическим, так как не было других достойных JS-инструментов. В наше время все немного поменялось: появились другие, более производительные JS-инструменты, поэтому популярность JQuery стала немного снижаться. Но это вовсе не означает, что не нужно использовать эту библиотеку в своей работе.
На что способна JQuery:
она открывает возможность гибкой манипуляции элементами на странице;
помогает моделировать различные визуальные эффекты;
помогает моделировать анимацию меньшим количеством строк программы, чем «ванильный» JavaScript;
манипулирует DOM-компонентами;
реализовывает асинхронный взаимообмен информацией в цепочке «клиент-сервер»;
умещает в одной строке несколько операций над одним элементом;
и мн. др.
Как подключить JQuery с Google CDN
CDN (Content Delivery Network) — уникальная технология быстрой доставки контента пользователям. Компании, предлагающие пользователям спектр каких-то услуг в интернете, часто используют CDN с своей работе, например, та же компания Google. Все знают, что это американская компания, но не все знают, что у компании разбросана сеть из крупных и мелких дата-центров по всему миру. То есть, пользуясь какой-то услугой от компании Google из России, вы «обращаетесь» к ближайшему дата-центру компании, который также расположен в России. А если вы воспользуетесь той же услугой из Европы, вам ее будет предоставлять ближайший дата-центр из Европы.
Обычно по сети CDN распределяется более «крупный» контент, например, какие-то приложения для скачивания. Также есть компании, которые предлагают услугу CDN для веб-мастеров. В этом случае их сайты кэшируются на нескольких серверах компании, и, когда пользователь обращается к сайту, ему показывается сайт с ближайшего к нему сервера.
По такому же принципу распространяется и JQuery. В традиционном способе, чтобы подключить JQuery к собственному проекту, нужно проделать примерно следующее:
скачать JQuery с официального сайта;
загрузить библиотеку к себе на сервер;
подключить JQuery в свой проект.
Это все делается быстро и просто, однако еще быстрее и проще — подключить JQuery с CDN. В этом случае вы всего лишь добавляете в собственный проект ссылку на библиотеку и начинаете применять ее по назначению. При этом нет необходимости что-то скачивать и заливать к себе на сервер. Такую возможность предоставляют многие IT-компании. Не принципиально использовать какую-то конкретную компанию, поэтому можете использовать любую. Нам нравится Google, поэтому мы опишем, как подключить JQuery с Google CDN.
Подключение JQuery с Google CDN выглядит следующим образом:
нужно пройти на специальную страницу от компании Google, где можно выбрать необходимую версию JQuery и там же скачать соответствующий скрипт;
скопировать скрипт и вставить его в раздел «head» вашего сайта.
На момент написания статьи скрипт для вставки на веб-страницы с актуальной версией JQuery будет следующим:
Из ветки 3.х:
<script src=»https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js»></script>
Из ветки 2.х:
<script src=»https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js»></script>
Из ветки 1.х:
<script src=»https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js»></script>
Заключение
Как видно, подключить JQuery с CDN достаточно просто. Самое важное, что не нужно ничего скачивать, а также нагружать серверы своего проекта. При таком дистанционном подключении JQuery во многих случаях работает лучше, чем скачанная и установленная.
До сих пор ходят споры, а стоит ли использовать JQuery в 2022 году? Ведь вокруг JavaScript появилось много других интересных и производительных инструментов. На самом деле, нет однозначного ответа, потому что JQuery, как и любой другой веб-инструмент, обладает своими сильными и слабым сторонами. Поэтому, если хотите ее попробовать, тогда пробуйте, а если в чем-то сомневаетесь, тогда выберите другой инструмент, который вам кажется более эффективным.
jQuery Начало работы
❮ Назад Далее ❯
Добавление jQuery на ваши веб-страницы
Существует несколько способов начать использовать jQuery на своем веб-сайте. Вы можете:
- Загрузите библиотеку jQuery с jQuery.com
- Включить jQuery из CDN, например Google
Скачивание jQuery
Для скачивания доступны две версии jQuery:
- Рабочая версия — предназначена для вашего работающего веб-сайта, поскольку она была уменьшена и сжата
- Версия для разработчиков — предназначена для тестирования и разработки (несжатый и читаемый код)
Обе версии можно загрузить с сайта jQuery. com.
Библиотека jQuery представляет собой один файл JavaScript, и вы ссылаетесь на него с помощью тега HTML
.(обратите внимание,что тегдолжен находиться внутри раздела
):
Совет: Поместите загруженный файл в тот же каталог, что и страницы, на которых вы хотите его использовать.
jQuery CDN
Если вы не хотите загружать и размещать jQuery самостоятельно, вы можете подключить его из CDN (сети доставки контента).
Google является примером того, кто размещает jQuery: