В этой заметке я разберу понятие CDN и определю основные показания и противопоказания к её использованию. Также я планирую привести несколько примеров использования CDN на практике.
CDN, если переводить дословно, это сеть доставки контента (Content Delivery Network). Под словом контент в данном случае подразумеваются статические ресурсы, которые мы используем на сайте: JavaScript библиотеки, файлы каскадных стилей (CSS), изображения в форматах (PNG, JPEG, GIF), flash (SWF) файлы, архивы (ZIP, RAR и другие), документы и любые бинарные файлики.
А под словами Сеть доставки подразумевают набор серверов разнесенных географически. Файлы на таких серверах синхронизируются и при необходимости пользователя получить файл – сервера между собой решают, кто будет отдавать файл. Таким образом, идет баллансировка нагрузки и увеличение скорости отклика и скорости передачи файла конечному пользователю или клиенту.
Чем такая сеть может быть полезна рядовому веб-мастеру?
Существует значительное число бесплатных CDN, которые можно и нужно использовать при разработке сайтов. Например, там можно совместно хранить и использовать общие JS-библиотеки и фреймворки: jQuery, jQuery UI, Prototype, MooTools, ExtJS и т.д. и т.п.
А зачем, если можно хранить все у себя?
- Экономия траффика (кэширование). На серверах CDN очень хорошо работает кэширование файлов. Например, пользователь зашел на сайт Васи, а потом на сайт Дениса и после этого зашел к нам на сайт. Если все три сайта используют один и тот же CDN, то библиотека загрузится только один раз, а все остальные разы она будет браться из локального кэша. Пользователь сэкономит несколько килобайт траффика и порадуется тому, как у него быстро загружаются сайты.
- Увеличение скорости загрузки. В описанном примере увеличение скорости загрузки было мнимым, т.е. на самом деле просто некоторые файлы вообще не загружались по второму разу. Скорость загрузки в первом случае все равно было больше и вот почему. У современных браузеров ресурсы с домена загружаются в несколько потоков. Количество потоков даже сейчас у самых продвинутых браузеров не превышает 10. Поэтому если картинок, файлов стилей и скриптов на сайте много, то некоторым будет нехватать места и им придется ждать своей очереди. А если JS-библиотеки окажутся на другом домене, то скорость загрузки за счет распараллеливания возрастет.
- Поддержка библиотек в актуальном состоянии, своевременное обновление версий – все это требует внимания и заботы. А у простого вебмастера на это может не хватить времени и сил.
- Отсутствие на домене хранилища CDN каких-либо Cookies (размер запроса уменьшается).
Являются ли CDN панацеей и спасением от всех бед?
Иногда, даже самые прочные стены могут разрушиться. CDN от гугл может начать медленно и печально отваливаться. Крупные и популярные ресурсы обязательно должны иметь локальные версии для так называемого fallback. Кто знает, что будет завтра? А сайт должен работать независимо от этих буржуазных гуглов.
С гугла, кстати, и начну обзор CDN-сервисов.
Google API
Код подключения:
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.4.1");
// Проверяем, подключилось или нет.
google.setOnLoadCallback(function() {
alert('Подключили jQuery через Google CDN');
});
</script>
В общем все предельно просто. Первый элемент скрипт загружает API гугла, которое уже позволяет загрузить хоть черта в ступе.
Во втором элементе мы вызываем у объекта google метод load, который принимает два параметра: название библиотеки и версию.
Также можно найти перечень ресурсов, которые можно загрузить с помощью этого загрузчика. Перечень включает даже web-шрифты!
Думаю этот раздел сайта гугла есть смысл изучить очень хорошо и подробно (это я к себе обращаюсь).
Хостинг JavaScript-библиотек от Яндекса
<script type="text/javascript" src="//yandex.st/jslibs/loader.js"></script>
Ya.load('jquery', '1.3', {onload: function() {
alert('jQuery из CDN Яндекса загружен');
}});
Первой строчкой, также как и у гугла, мы подключаем загрузчик API и дальше уже танцуем как хотим.
Также есть возможность использовать статические пути к библиотекам.
Руководство по подключению библиотек
Обзор JavaScript библиотек в CDN Яндекса
CDN от Yahoo
Используя CDN от компании Yahoo вы можете использовать только библиотеку компонентов YUI 2. Её можно сконфигурировать на специальной странице.
CDN от Microsoft
Позволяет подключать jQuery и jQuery UI и несколько других библиотек. В основном предполагается, что использовать этот CDN будут разработчики .NET для своих микрософтовских web-проектов. Впрочем, остальным тоже не запрещается.
Для подключения можно использовать статические пути.
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.min.js"> </script> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.7/jquery-ui.min.js"> </script>
А никакого особого загрузчика не предусмотрено.
Для более подробного ознакомления можно посетить страницу проекта Microsoft Ajax CDN