Один из главных советов для оптимизации скорости загрузки сайтов является использование публичных CDN с популярными библиотеками, такими как jQuery или AngularJS.
Преимущества CDN
- Увеличение скорости загрузки, поскольку пользователь сможет получить контент по оптимальному маршруту за минимальное время из ближайшей точки;
- Снижение нагрузки на наш сервер, ведь скрипты мы загружаем с чужих серверов.
В настоящий момент, очень многие используют CDN для загрузки своих скриптов. К примеру, часто можно видеть вот такой код:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
Однако многие забывают о том, что нужно проверить, загрузился ли наш скрипт. И если не загрузился, то загрузить его с нашего сайта.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
Конечно, это самый простой способ, применимый для большинства сайтов. Для больших SPA я рекомендовал бы воспользоваться асинхронной загрузкой скриптов через RequireJS.
Пример загрузки jQuery из CDN с безопасной загрузкой с нашего сервера если с CDN возникли какие-то проблемы:
requirejs.config({
enforceDefine: true,
paths: {
jquery: [
'http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min',
// Если из CDN наша библиотека не загрузилась,
// то загружать из папки lib файл jquery.js
'lib/jquery'
]
}
});
require(['jquery'], function ($) { /* Ваш код тут */ });
В примерах использовалась библиотека jQuery, но так-же можно загружать и другие библиотеки.
Список бесплатных CDN сервисов
- Google CDN поддерживает Angular JS, Angular Material, Dojo, Ext JS, jQuery, jQuery Mobile, MooTools, Prototype, SWFObject, three.js, SPF и Web Font Loader;
- Yandex CDN (RU), из доступных библиотек AngularJS, Backbone.js, Bootstrap, D3.js, Dojo, Highlight.js,jQuery, jQuery UI, Lo-Dash, Modernizr, Raphaёl, SWFObject, Underscore.js;
- jQuery CDN (только для jQuery);
- Microsoft CDN поддерживает jQuery/UI/Mobile, Modernizr, JSHint, Bootstrap, ASP.NET Web Forms and Ajax и другие;
- Cdnjs — тут есть наверное все js библиотеки, поскольку их можно захостить туда любому желающему;
- jsDelivr — так-же куча библиотек, можно заливать свои;
- OssCDN — тоже много библиотек с возможностью загружать свои;
Из всех, вышеперечисленных сервисов, только Яндекс на русском языке. Поэтому если вы не сильны в английском, я бы рекомендовал именно его. К тому-же, там действительно одни из самых популярных javascript библиотек, в том числе очень популярный бутстрап. Для которого можно так-же воспользоваться Bootstrap CDN.
Если вы пишите свой, публичный скрипт, то его можно загрузить в jsDelivr/CDNjs/osscdn и пользоваться им через CDN.
А вы используете CDN для загрузки библиотек на своих проектах?
