Посилання зовнішнього 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 Бібліотеки усуває один запит на ваш сайт, дозволяючи паралельно завантажувати більшу кількість локального вмісту.
• Краще кешування - використовуючи бібліотеки AJAX Google, вашим користувачам може не потрібно завантажувати 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 API .

Основна причина цього - прискорити завантаження сторінки . Якщо ви вже відвідали інший сайт, на який посилається та сама бібліотека, він вже зберігатиметься в кеші браузера, і його взагалі не потрібно буде завантажувати .

Я можу помилитися, але впроваджуючи 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>

Я хотів би додати, що розміщення локальної копії є найкращою практикою, оскільки жодне з вищезазначених не заявляє нічого, що стосується захищеної пози, згідно з якою географічне розташування та суворий Білий список є обов'язковими. Якщо хостинг цього файлу локально не передбачається, щоб надати вашим клієнтам зменшене положення безпеки