/ 

Безопасное использование CDN для jQuery, Angular, Bootstrap и других библиотек

Один из главных советов для оптимизации скорости загрузки сайтов является использование публичных CDN с популярными библиотеками, такими как jQuery или AngularJS.

Преимущества CDN

  1. Увеличение скорости загрузки, поскольку пользователь сможет получить контент по оптимальному маршруту за минимальное время из ближайшей точки;
  2. Снижение нагрузки на наш сервер, ведь скрипты мы загружаем с чужих серверов.

В настоящий момент, очень многие используют 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 сервисов

  1. Google CDN поддерживает Angular JS, Angular Material, Dojo, Ext JS, jQuery, jQuery Mobile, MooTools, Prototype, SWFObject, three.js, SPF и Web Font Loader;
  2. Yandex CDN (RU), из доступных библиотек AngularJS, Backbone.js, Bootstrap, D3.js, Dojo, Highlight.js,jQuery, jQuery UI, Lo-Dash, Modernizr, Raphaёl, SWFObject, Underscore.js;
  3. jQuery CDN (только для jQuery);
  4. Microsoft CDN поддерживает jQuery/UI/Mobile, Modernizr, JSHint, Bootstrap, ASP.NET Web Forms and Ajax и другие;
  5. Cdnjs — тут есть наверное все js библиотеки, поскольку их можно захостить туда любому желающему;
  6. jsDelivr — так-же куча библиотек, можно заливать свои;
  7. OssCDN — тоже много библиотек с возможностью загружать свои;

Из всех, вышеперечисленных сервисов, только Яндекс на русском языке. Поэтому если вы не сильны в английском, я бы рекомендовал именно его. К тому-же, там действительно одни из самых популярных javascript библиотек, в том числе очень популярный бутстрап. Для которого можно так-же воспользоваться Bootstrap CDN.

Если вы пишите свой, публичный скрипт, то его можно загрузить в jsDelivr/CDNjs/osscdn и пользоваться им через CDN.

А вы используете CDN для загрузки библиотек на своих проектах?

⌘ ⌘ ⌘
Ускоряем загрузку ресурсов для сайта: preconnect, prefetch, prerender, preloading…
Фронтенд

Ускоряем загрузку ресурсов для сайта: preconnect, prefetch, prerender, preloading…

HTML5 Link Prefetch указывает браузеру какие ресурсы вам понадобятся в будущем на сайте и максимально подготовит их дальнейшую загрузку.

Три плагина, которые сделают Single Page Application лучше
Фронтенд

Три плагина, которые сделают Single Page Application лучше

Три плагина улучшат приложение для пользователей с нестабильным или медленным интернетом и тех, кто пользуется телефоном для просмотра. Pace.js, Offline.js, FastClick.js.

Контрольные точки медиа выражений Bootstrap
Фронтенд

Контрольные точки медиа выражений Bootstrap

Какие контрольные точки для media queries используются в css фреймворке Bootstrap для мобильных устройств? Почему медиа выражения с EM лучше чем с PX?