1. Общие сведения о jQuery и CDN.
Библиотека скриптов jQuery весит примерно 90 Кб (без сжатия). Если использовать YUI Compressor и включить gzip-сжатие на сервере, то объем передаваемых данных при загрузке библиотеки уменьшится. И все же это «бутылочное горлышко» в загрузке сайта, которое нужно и можно расширить.
Важно, что более новые версии библиотеки зачастую весят больше, чем более старые. Также важно знать, что плагины и компоненты сайта могут быть несовместимы со старыми версиями jQuery.
По умолчанию, загрузка библиотеки jQuery происходит с вашего сайта (если сайт на WordPress, то из папки /wp-includes/js/jquery/).
Некоторые плагины сами подключают библиотеку jQuery. Это может вызывать множественную загрузку скрипта или одновременную загрузку нескольких версий библиотеки. Важно за этим следить и устранять такую проблему — как это сделать — читайте ниже.
CDN — это Content Delivery Network или сеть доставки контента. Такая сеть позволяет существенно ускорить загрузку файлов, размещенных в сети. Принцип работы CDN состоит в том, что имеется сеть серверов, на каждом из которых дублируется размещенная информация. Когда пользователь запрашивает загрузку объекта (скрипта, файла стилей и т.д.), то происходит определение ближайшего к клиенту сервера и с него загружаются данные. В итоге задержки загрузки минимальны, скорость максимальна.
Минусы технологии CDN состоят в ее сложности и высокой стоимости использования.
Однако мы, простые люди, можем получить доступ к CDN крупных компаний и загружать библиотеку скриптов jQuery с их серверов.
Для загрузки jQuery существует несколько общедоступных бесплатных CDN:
- jQuery CDN
- Google CDN
- Microsoft CDN
- CDNJS CDN
- Яндекс CDN
Вы можете выбрать любой сервис для подключения библиотеки jQuery к вашему сайту. Я решил подключать библиотеку с сервера Google.
В сети встречается мнение, что подключение jQuery с внешнего сервера ненадежно, что сервер может упасть и тогда ваш сайт будет нефункционален. Однако это совершенно не так. Поверьте, стабильность работы и принципы архитектуры CDN-серверов таких монстров как Google или Яндекс настолько хороша, что эти серверы фактически всегда в строю. Вероятность падения сервера стремится почти к нулю. И конечно же , ваш хостинг гораздо менее стабилен, чем сервер CDN. Поэтому смело подключайте библиотеку с внешнего сервера.
Для наглядности приведу картинку, показывающую разницу в скорости загрузки библиотеки с хорошего хостинга и с CDN сервера Google:
Как вы видите, разница в скорости загрузки библиотеки в 15 раз в пользу Google CDN! Если в обычного хорошего хостинга библиотека скриптов загружается 475 мс (полсекунды), то с CDN всего лишь 32 мс.
Быть может, вы думаете: полсекунды — это ничтожно мало! Но тут вы ошибаетесь. Это загрузка лишь одной библиотеки скриптов, а не всего сайта. Скорость загрузки сайта очень важна — она определяет лояльность посетителей сайта. А с учетом того, что все больше людей выходят в интернет с мобильных устройств, у которых интернет-соединение довольно-таки медленное, то разница существенная.
maxtop.org
Сжатый и несжатый варианты jQuery
jQuery доступна в сжатом и несжатом варианте. Несжатую версию удобно использовать во время разработки и отладки вашего сайта. Сжатая версия практически бесполезна при отладке, однако она значительно меньше весит и поэтому ее целесообразно применять на выпущенной версии сайта, для более оптимальной работы (сжатый скрипт будет быстрее подключен к странице, а так же быстрее обработан).
Начиная с jQuery-1.9 доступна так же карта исходников (sourcemap). С помощью нее можно производить отладку сжатой версии, так, как если бы она не была. Подробнее о картах исходников можно прочитать здесь (англ.).
Версии jQuery
Сейчас существует две основные ветки версий jQuery 1.x и 2.x. Их отличия заключаются лишь в том, что в версиях 2.x перестали поддерживаться браузеры IE версий 8, 7 и 6. Это позволило уменьшить размер jQuery более чем на 10%, а так же немного ускорить работу библиотеки. Пока что старые версии IE все еще в ходу, поэтому рекомендуется использовать ветку 1.x.
Практически каждая следующая версия jQuery совместима с предыдущими. То есть, если ваш сайт работает с jQuery-1.7, то его можно безболезненно переводить на jQuery-1.8. Исключением стала версия jQuery-1.9, в которой некоторые (сомнительные) функции были удалены. Для того чтобы перевести сайт с jQuery 1.8 и меньше, на 1.9 (или более новые версии), можно воспользоваться следующим руководством (англ.).
Загрузка и подключение jQuery
Загружать jQuery желательно с официального сайта. Уже на первом экране будут ссылки на свежие версии jQuery 1.x и 2.x, в сжатых и не сжатых вариантах. Чтобы закачать файлы по этим ссылкам, нужно кликнуть по ним правой клавишей и выбрать «Сохранить ссылку как».
После того как вы скачали нужный файл с jQuery, нужно закачать его на сервер, где располагается ваш сайт и подключить его на страницы своего сайта, прописав до него путь:
Подключение jQuery с CDN
Существует альтернативный вариант подключить jQuery на страницы вашего сайта (не закачивая библиотеку на сервер). Можно подключить библиотеку, которая находится не на вашем сервере, а на серверах CDN. Существуют несколько таких хранилищ, наиболее известные и надежные из них Google CDN, Microsoft CDN, а так же CDN который организовали создатели jQuery.
Подключить jQuery с CDN не сложнее, чем со своего сервера — необходимо просто прописать соответствующий путь до него. Вот например как подключается библиотека с официального CDN jQuery:
Узнать о некоторых трюках подключения jQuery с CDN можно здесь.
Собственная сборка jQuery
Исходный код (его можно найти и скачать с github.com) jQuery разделен на модули. Поэтому, в случае, если вам не требуется поддержка некой функциональности (например ajax), можно сделать собственную сборку jQuery, включающую только необходимые модули (описание того как это сделать есть на github.com). Правда стоит заметить, что едва ли это приведет к заметному приросту производительности, размер jQuery около 90кб, столько же весит средняя по размерам и качеству картинка. К тому же, будучи подключенным один раз, jQuery будет закеширован браузером и при следующих обращениях будет браться уже от туда.
jquery.page2page.ru
UPDATE 7/3/2014: As of now, jquery-latest.js is no longer being updated. From the jQuery blog:
We know that http://code.jquery.com/jquery-latest.js is abused because of the CDN statistics showing it’s the most popular file. That wouldn’t be the case if it was only being used by developers to make a local copy.
We have decided to stop updating this file, as well as the minified copy, keeping both files at version 1.11.1 forever.
The Google CDN team has joined us in this effort to prevent inadvertent web breakage and no longer updates the file at http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js. That file will stay locked at version 1.11.1 as well.
The following, now moot, answer is preserved here for historical reasons.
Don’t do this. Seriously, don’t.
Linking to major versions of jQuery does work, but it’s a bad idea — whole new features get added and deprecated with each decimal update. If you update jQuery automatically without testing your code COMPLETELY, you risk an unexpected surprise if the API for some critical method has changed.
Here’s what you should be doing: write your code using the latest version of jQuery. Test it, debug it, publish it when it’s ready for production.
Then, when a new version of jQuery rolls out, ask yourself: Do I need this new version in my code? For instance, is there some critical browser compatibility that didn’t exist before, or will it speed up my code in most browsers?
If the answer is «no», don’t bother updating your code to the latest jQuery version. Doing so might even add NEW errors to your code which didn’t exist before. No responsible developer would automatically include new code from another site without testing it thoroughly.
There’s simply no good reason to ALWAYS be using the latest version of jQuery. The old versions are still available on the CDNs, and if they work for your purposes, then why bother replacing them?
A secondary, but possibly more important, issue is caching. Many people link to jQuery on a CDN because many other sites do, and your users have a good chance of having that version already cached.
The problem is, caching only works if you provide a full version number. If you provide a partial version number, far-future caching doesn’t happen — because if it did, some users would get different minor versions of jQuery from the same URL. (Say that the link to 1.7 points to 1.7.1 one day and 1.7.2 the next day. How will the browser make sure it’s getting the latest version today? Answer: no caching.)
In fact here’s a breakdown of several options and their expiration settings…
http://code.jquery.com/jquery-latest.min.js (no cache)
http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js (1 hour)
http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js (1 hour)
http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js (1 year)
So, by linking to jQuery this way, you’re actually eliminating one of the major reasons to use a CDN in the first place.
http://code.jquery.com/jquery-latest.min.js may not always give you the version you expect, either. As of this writing, it links to the latest version of jQuery 1.x, even though jQuery 2.x has been released as well. This is because jQuery 1.x is compatible with older browsers including IE 6/7/8, and jQuery 2.x is not. If you want the latest version of jQuery 2.x, then (for now) you need to specify that explicitly.
The two versions have the same API, so there is no perceptual difference for compatible browsers. However, jQuery 1.x is a larger download than 2.x.
stackoverflow.com
Сначала посмотрите на это:
<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 мс) |
habr.com
Подключение последней версии jQuery. Пример:
<head> <!-- ... --> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <!-- ... --> </head>
Подключение необходимой Вам версии, например 2.1.1:
<head> <!-- ... --> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- ... --> </head>
Еще один вариант подключения необходимой Вам версии, например 2.1.1
<head> <!-- ... --> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> // подключаем нужную версию jquery google.load("jquery", "2.1.1"); google.setOnLoadCallback(function() { alert('версия jQuery: ' + jQuery.fn.jquery); }); </script> <!-- ... --> </head>
Самый надежный вариант. Подключение с Google, если Google недоступен — подключаем со своего сайта:
<!DOCTYPE html> <html> <head> <!-- ... --> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript"> if (typeof jQuery == 'undefined') { document.write(unescape("%3Cscript src='/path/to/jquery.min.js' type='text/javascript'%3E%3C/script%3E")); } </script> <!-- ... --> </head> <body> <!-- ... --> <script> var msg; if (window.jQuery) { msg = 'версия jQuery: ' + jQuery.fn.jquery; } else { msg = 'jQuery не установлен'; } alert(msg); </script> <!-- ... --> </body> </html>
Список всех версий jQuery можно посмотреть по адресу: http://code.jquery.com/jquery/
Плюсы подключения через Google:
- Сайт будет грузиться быстрее, т.к. это хранилище используют многие проекты. А это значит что у многих пользователей плагин уже находится в кэше, что позволяет jQuery загружаться моментально. Если jQuery нет в кэше, тогда большая вероятность, что он будет взят из ближайших кэшей прокси.
- Если его нет в кэше прокси, то jQuery будет доставлен быстрее пользователю, т.к. Google имеет большую сеть серверов и пользователь получит библиотеку из ближайшего.
- Пользователь получает ответ от Google быстрее чем от рядового сервера т.к. Google обладает более мощными ресурсами.
- На серверах Google настроено gzip сжатие, которое дополнительно сжимает размер библиотеки.
Минусы:
- Зависимость от третей стороны. Если упадут сервера Google (что мало вероятно), то пользователь не получит библиотеку.
- Если Google забанил IP пользователя, то библиотека не будет загружена.
- Нет возможности получить урезанную версию плагина.
Несмотря на эти недостатки большинство проектов получит значительное ускорение при загрузки сайта.
кодер.укр
Многие шаблоны, плагины и компоненты сайта используют для своей работы библиотеку скриптов jQuery. По умолчанию в WordPress скрипты загружаются из папки wp-includes. Первоначальный размер библиотеки jQuery составляет порядка 300KB, после минимизации его можно уменьшить до 90KB. Дополнительно количество передаваемых данных можно снизить за счет использования сжатия GZIP.
На первый взгляд, количество переданных данных при загрузке jQuery очень мало чтобы существенно повлиять на работу сервера. Но данное утверждение справедливо только отчасти.
Ситуация кардинально меняется если посетители запросят миллион страниц с пустым кэшем браузера, в этом случае используя CDN вы экономите до 76GB трафика. А при использовании популярного Google CDN, есть большая вероятность, что необходимая библиотека jQuery уже лежит внутри кэша браузера. В добавок, если сравнить скорости загрузки с CDN и обычного хостинга, то разница во времени может отличаться в несколько раз в пользу CDN.
Таким образом, используя CDN для загрузки jQuery, мы без труда убираем один лишний запрос к серверу и немного уменьшаем время загрузки страниц сайта. Так зачем игнорировать такую возможность?
Вместо того чтобы использовать платные CDN-сервисы, мы можем свободно загружать jQuery с серверов крупных компаний. Для jQuery есть несколько популярных общедоступных CDN:
- jQuery CDN
- Google CDN
- Microsoft CDN
- CDNJS CDN
- Яндекс CDN
Подробней о использовании указанных CDN-сервисов вы можете прочитать на официальном сайте jQuery. Что касается меня, для своих нужд я предпочитаю использовать Google CDN — наиболее популярный среди всех бесплатных CDN-сервисов, 89% от загрузок которого приходится на библиотеку jQuery. Поэтому, далее речь пойдет о использовании именного этого сервиса.
Особенности использования Google CDN
При использовании Google CDN, вы можете прямо указать версию (1.11.1) загружаемой библиотеки или с помощью модификации фрагмента ссылки, указать необходимые параметры для загрузки jQuery.
Пример подключения jQuery с использованием точной версии библиотеки:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Для загрузки последней актуальной версии jQuery используем код:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
Следует отметить, что время жизни файла в кэше браузера, напрямую зависит от ссылки, которую мы будем использовать для подключения библиотеки. При использовании ссылки содержащей точную версию библиотеки, время хранение файла в кэше будет ограничено сроком равным одному году max-age=31536000. Если вы используете ссылку для последней актуальной версии jQuery, файл будет храниться в кэше в течении часа max-age=3600.
Используем Google CDN для загрузки jQuery в WordPress
Для загрузки jQuery с Google CDN на сайте использующем WordPress, для начала необходимо выяснить необходимую версию библиотеки. Для этого достаточно заглянуть в содержимое HTML-документа вашего сайта. Для правильного подключения jQuery в WordPress необходимо добавить код функции ниже в содержимое файла functions.php вашей темы:
function wpdocs_dequeue_script() { wp_deregister_script('jquery'); wp_register_script('jquery', ("//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"), false, '1.11.1'); wp_enqueue_script('jquery'); } add_action( 'wp_print_scripts', 'wpdocs_dequeue_script', 100 );
Данная функция удалит из очереди на подключение библиотеку из каталога wp-includes и заменяет ее на jQuery с сайта Google CDN.
codebeer.ru
ОБНОВЛЕНИЕ 7/3/2014: На данный момент jquery-latest.js больше не обновляется. Из блога jQuery:
Мы знаем, что http://code.jquery.com/jquery-latest.js злоупотребляют из-за статистики CDN показывая его самый популярный файл. Это было бы не так, если бы это было был использован только разработчиками для создания локальной копии.
Мы решили прекратить обновление этого файла, а также уменьшенную копию, сохраняя оба файла в версии 1.11.1 навсегда.
Команда CDN Google присоединилась к нам в этой непреднамеренный перерыв в сети и больше не обновляет файл на http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js. Этот файл будет оставаться заблокированным и в версии 1.11.1.
Следующий, теперь спорный ответ сохраняется здесь по историческим причинам.
Не делайте этого. Серьезно, не делайте.
Связывание с основными версиями jQuery действительно работает, но это плохая идея — все новые функции добавляются и устаревают с каждым десятичным обновлением. Если вы обновите jQuery автоматически без тестирования кода ПОЛНОСТЬЮ, вы рискуете неожиданным сюрпризом, если API для некоторого критического метода изменился.
Вот что вы должны делать: напишите свой код, используя последнюю версию jQuery. Протестируйте его, отлаживайте, публикуйте его, когда он готов к производству.
Затем, когда выйдет новая версия jQuery, спросите себя: Нужна ли мне эта новая версия в моем коде? Например, существует ли какая-то критическая совместимость с браузером, которая раньше не существовала, или это ускорит мой код в большинстве браузеров?
Если ответ «нет», не беспокойтесь, обновляя свой код до последней версии jQuery. Это может даже добавить НОВЫЕ ошибки в ваш код, который не существовал до. Ни один ответственный разработчик не будет автоматически включать новый код с другого сайта без тщательного тестирования.
Просто нет веской причины ВСЕГДА использовать последнюю версию jQuery. Старые версии все еще доступны на CDN, и если они работают для ваших целей, то зачем их заменять?
Вторичная, но, возможно, более важная проблема — кэширование. Многие люди ссылаются на jQuery на CDN, потому что многие другие сайты делают это, и ваши пользователи имеют хорошие шансы на то, что эта версия уже кэширована.
Проблема в том, что кэширование работает только в том случае, если вы предоставляете полный номер версии. Если вы предоставляете частичный номер версии, кэширование в будущем будущем не произойдет, потому что если это произойдет, некоторые пользователи получат разные младшие версии jQuery с одного и того же URL-адреса. (Скажем, что ссылка на 1,7 указывает на 1,7,1 в день и 1,7,2 на следующий день. Как браузер будет уверен, что он получит последнюю версию сегодня? Ответ: нет кеширования.)
Фактически здесь разбивка нескольких вариантов и их истечение Настройки…
http://code.jquery.com/jquery-latest.min.js (без кеша)
http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js (1 час)
http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js (1 час)
http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js (1 год)
Итак, связываясь с jQuery таким образом, вы фактически устраняете одну из основных причин использования CDN в первую очередь.
http://code.jquery.com/jquery-latest.min.js может не всегда давать вам ожидаемую версию. На момент написания этой статьи он ссылался на последнюю версию jQuery 1.x, хотя был выпущен и jQuery 2.x. Это связано с тем, что jQuery 1.x совместим со старыми браузерами, включая IE 6/7/8, и jQuery 2.x не является. Если вам нужна последняя версия jQuery 2.x, то (на данный момент) вам нужно явно указать это.
Две версии имеют один и тот же API, поэтому для совместимых браузеров нет различий в восприятии. Однако jQuery 1.x является более крупным, чем 2.x.
qaru.site
Как подключать jQuery в WordPress
Самый распространенный способ подключения jQuery (и в WordPress тоже) – в файл header.php, между тегами <hеаd> и </hеаd>. Обычно это такая строка:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
в которой может меняться только номер версии.
Такое подключение будет работать, но почему-то многие гуру программирования предупреждают, что код подключения jQuery лучше всего размещать в подвале, то есть – в файле footer.php. Отложенная загрузка jQuery визуально ускоряет загрузку страницы.
И еще — в WordPress скрипты подключаются при помощи специального программного метода: это такие функции, как wp_register_script(), wp_enqueue_script(), wp_deregister_script(), и т.д. Это делается для того, чтобы между некоторыми плагинами, которых в хранилище WordPress уже более 30 000 штук, не возникало конфликтов при подключении одного скрипта в разных местах страницы. Допустим, jQuery подключается и в самом плагине, и на странице WordPress – это неизменно вызовет программный сбой.
Поэтому следует добиваться такого подключения скриптов, при котором их можно объединить программным способом в один файл, чтобы браузер получал их уже оптимизированными и в сжатом виде. Также CDN метод помогает избежать сбоя при неизменных обновлениях библиотек – не нужно будет каждый раз вносить вручную изменения версии jQuery, AngularJS или SWFObject.
Правильное подключение jQuery
Правильно подключить библиотеку jQuery — это значит, использовать функцию wp_enqueue_script(). Ниже вы видите код подключения. Такой способ подключения не нарушает стандарты программирования и исключает возможность конфликтов при подключении одного и того же скрипта в плагинах, так как скрипт будет подключаться только один раз:
<?php function my_scripts_method(){ wp_enqueue_script( 'jquery' ); } add_action( 'wp_enqueue_scripts', 'my_scripts_method' ); ?>
Вставляется этот фрагмент кода в файл шаблона functions.php. После вставки этого кода в <hеаd> и </hеаd> отделе заголовка страницы появится такая строчка:
<script type='text/javascript' src='http://wptest.ru/wp-includes/js/jquery/jquery.js?ver=1.11.0'></script>
Использование CDN при подключении jQuery в WordPress
Теперь о применении CDN при подключении jQuery в WordPress. Код, приведенный выше, показывает способ подключения jQuery из файлов WordPress, но проще, быстрее и безопаснее подключать jQuery с CDN Google. Такой способ обладает следующими преимуществами:
1. Подключаемый файл будет сжатым виде, и весить будет меньше.
2. Если пользователь уже был на сайте, на котором jQuery подключался таким же образом, то в кэше его браузера уже остался этот скрипт. То есть — скрипт вообще не будет загружаться при посещении сайта с использованием CDN при подключении jQuery в WordPress. На сегодняшний день около 20% сайтов уже используют такое подключение с использованием CDN Google для jQuery.
3. Файл загружается отдельным потоком.
Для подключения jQuery с CDN Google, нужно отметить уже зарегистрированный в WordPress путь к файлу jQuery и зарегистрировать свой скрипт. Сделать это можно добавлением в файл functions.php вашего шаблона темы такого фрагмента php кода:
function my_scripts_method() { wp_deregister_script( 'jquery' ); // отменяем зарегистрированный jQuery wp_register_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'); wp_enqueue_script( 'jquery' ); } add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
Динамический jQuery
Осталось только одно непредвиденное обстоятельство – версия jQuery, которая указана в коде подключения, не может изменяться при обновлениях. Все эти версии будут постепенно обновляться в CDN Google, но не в вашем WordPress. Решается, однако, эта проблема довольно просто — необходимо взять текущую версию jQuery в WordPress и вставить ее в ссылку на CDN Google вот таким образом:
function my_scripts_method() { // получаем версию jQuery wp_enqueue_script( 'jquery' ); $wp_jquery_ver = $GLOBALS['wp_scripts']->registered['jquery']->ver; // для версий WP меньше 3.6 'jquery' меняем на 'jquery-core' $jquery_ver = $wp_jquery_ver == '' ? '1.11.0' : $wp_jquery_ver; wp_deregister_script( 'jquery' ); wp_register_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/'. $jquery_ver .'/jquery.min.js', false, null, true ); wp_enqueue_script( 'jquery' ); } add_action( 'wp_enqueue_scripts', 'my_scripts_method', 99 );
Теперь версия jQuery будет определяться динамически, и вам уже не нужно будет ломать голову, почему скрипт вдруг перестал работать после обновления. Скрипт подключается в файле footer.php (значения false, null, true). Ну и повторюсь еще раз — все скрипты рекомендуется также подключать в файле footer.php документа, то есть – в подвале шаблона. До встречи!
seobid.net