Ссылка на внешний JavaScript и размещение моей собственной копии

Скажем, у меня есть веб-приложение, которое использует jQuery. Рекомендуется ли размещать необходимые файлы javascript на моих собственных серверах вместе с файлами моего веб-сайта или ссылаться на них в CDN jQuery (пример: http://code.jquery.com/jquery-1.7.1.min.js ) ?

Я вижу плюсы для обеих сторон:

• Если это на моих серверах, это на одну внешнюю зависимость меньше; если jQuery отказался или изменил структуру своего хостинга или что-то в этом роде, то мое приложение сломалось. Но я чувствую, что это случается не часто; там должно быть много небольших сайтов, делающих это, и команда jQuery не захочет их нарушать.
• Если это на моих серверах, это одна из внешних ссылок, которую кто-то может назвать проблемой безопасности
• Если на него ссылаются внешне, то мне не нужно беспокоиться о пропускной способности для обслуживания файлов (хотя я знаю, что это не так уж и много).
• Если на него ссылаются внешне, и я развертываю этот веб-сайт на множестве серверов, которым необходимо иметь свои собственные копии всех файлов, то это еще один файл, который я должен помнить, чтобы копировать / обновлять.

Вы должны сделать оба:

Начните с хостинга из CDN, такого как Google, потому что он, скорее всего, будет работать быстрее, чем ваш собственный сайт, и будет настроен на самое быстрое время отклика. Кроме того, любой, кто посетил страницу, которая ссылается на CDN, будет использовать свою кэшированную копию файла, поэтому им даже не придется повторно загружать копию, что делает первоначальную загрузку еще быстрее.

Затем добавьте резервную ссылку на ваш собственный сервер на случай, если CDN окажется недоступным (маловероятно, но безопасно и безопасно). Отступления относительно просты для понимания, но их необходимо настроить в соответствии с используемым сценарием:

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script>
    if (!window.jQuery) document.write('<script src="/path/to/jquery-ver.sion.min.js"><\/script>');
</script>

Убедитесь, что вы </script>нигде не пишете внутри <script>элемента, так как он закроет HTML-элемент и вызовет сбой скрипта. Простое исправление является использование обратной косой черты как побег: <\/script>.

_{Еще одна причина сделать оба:}

Если вы выберете популярный CDN, маловероятно, что у него когда-нибудь будет простои, однако в далеком будущем (~ 18 месяцев с момента принятия закона Мура ), когда формат хостинга изменится, или будет изменен адрес, или Сеть размещена за платным доступом, или что-то еще, возможно, ваша ссылка больше не будет работать как есть. Если вы используете запасной вариант, то у вас будет немного времени, чтобы приспособиться к любому новому формату хостинга, прежде чем переходить на каждый созданный вами веб-сайт и изменять ссылки CDN.

_{Еще одна причина сделать оба:}

Недавно я был поражен интернетом. Я смог продолжать локально работать над проектами, в которых я связывал локальные копии ресурсов сценариев, и быстро обнаружил, что существует ряд проектов, которым необходимо связать локальные копии.

У меня был тот же вопрос, затем я прочитал эту статью, и меня продали на идее позволить Google разместить мою библиотеку jQuery.

В статье указаны основные преимущества размещения ваших библиотек в сети доставки контента Google (CDN):

• Снижение задержки - пользователи, физически не находящиеся рядом с вашим сервером, смогут загружать jQuery из Google быстрее, чем если вы заставите их загружать его с произвольно расположенного сервера.
• Увеличенный параллелизм - Браузеры ограничивают количество соединений, которые могут быть сделаны одновременно. В зависимости от того, какой браузер, этот предел может составлять всего два подключения на имя хоста. Использование CDN библиотек Google AJAX исключает один запрос на ваш сайт, позволяя параллельно загружать больше локального контента.
• Лучшее кэширование - при использовании библиотек Google AJAX вашим пользователям может вообще не понадобиться скачивать jQuery. С другой стороны, если вы размещаете jQuery локально, ваши пользователи должны загрузить его хотя бы один раз. Каждый из ваших пользователей, вероятно, уже имеет десятки идентичных копий jQuery в кеше своего браузера, но эти копии jQuery игнорируются при посещении вашего сайта.

Что касается двух ключевых моментов, которые вы назвали профессионалами для размещения своей собственной библиотеки, помните, что это Google поддерживает облачную версию, и Google знает, что они делают, и им можно доверять в том, что касается доступности и безопасности. Тем не менее, @zzzzBov делает очень хороший ответ в своем ответе на этот вопрос, где он рекомендует также хранить локальную копию библиотеки и использовать ее по умолчанию в маловероятном случае, когда версия CDN не будет доступна по любой причине.

Лично я беру сигнал с http://html5boilerplate.com/

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="includes/js/libs/jquery-1.6.1.min.js"%3E%3C/script%3E'))</script>

Это извлекает основной файл jQuery из Google, но если по какой-то причине он не загружается, следующая строка загружает его с вашего собственного сервера.

Лучше использовать CDN, и, если это CDN от Google, тем лучше - как отметили @CFL_Jeff и @Morons.

Я добавляю этот ответ, чтобы указать на то, что часто упускается из виду при указании в другом месте, что позволяет избежать предупреждения о смешанном контенте . Рассмотрите возможность использования URL-адресов без протокола, например:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js" type="text/javascript">
</script>

По-прежнему существуют некоторые проблемы с поддержкой использования URL-адресов без протокола, поэтому также внимательно изучите ответы на вопрос: Могу ли я изменить все мои ссылки http: // просто на //? на SO, но по крайней мере , попытаться обработать потенциальные предупреждения смешанного содержания в какой - то образом.

Вы должны сослаться на это в Библиотеку API Google .

Основной причиной этого является ускорение загрузки страницы . Если ваш пользователь уже посетил другой сайт, ссылающийся на ту же библиотеку, он уже будет сохранен в кэше браузера и его вообще не нужно будет загружать .

Я могу ошибаться, но реализация document.write перезаписывает все, что есть в DOM. Поскольку хорошей практикой является размещение файлов JavaScript в конце тела,

Я предлагаю следующий метод, основанный на предыдущих ответах:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">

if(!window.jQuery)
{
    //Creates the script element
    var script = document.createElement('script'); 
    //Adds the type attribute with "text/javascript" value
        script.setAttribute('type', 'text/javascript'); 
    //Adds the source attribute and populates it
        script.setAttribute('src', 'Put_The_Relative_Path_To_Your_JavaScript_File_Here'); 
    //Adds it to the end of the body, as it is good practice, to prevent render-blocking.  
    document.body.appendChild(script);

}

//Note that there's no need for you to verify with an onload function, since all scripts
//must be loaded before going to the next one! 

</script>

Я хотел бы добавить, что размещение локальной копии является наилучшей практикой, поскольку ни в одном из вышеперечисленных документов не указано ничего, связанного с безопасным положением, в соответствии с которым Geo Location и строгий белый список являются обязательными. Отсутствие локального размещения этого файла может привести к снижению уровня безопасности для ваших клиентов.