Яка найкраща практика використання Twitter Bootstrap, посилання на нього з CDN або створення локальної копії на моєму сервері?
Оскільки Bootstrap постійно розвивається, я боюся, якщо я посилаюсь на CDN, користувач побачив би різні веб-сторінки з часом, і деякі теги можуть навіть зламатися. Який вибір у більшості людей?
Відповіді:
Чому б не обидва ¯ \ _ (ツ) _ / ¯? У Скотта Хензельмана є чудова стаття про використання CDN для підвищення продуктивності, але витончено повертається до локальної копії у випадку, якщо CDN не працює .
Спеціально для завантажувальної програми, ви можете виконати наступне для завантаження з CDN з локальним запасом :
<head>
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet" href="~https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
<!-- Bootstrap CSS local fallback -->
<script>
var test = document.createElement("div")
test.className = "hidden d-none"
document.head.appendChild(test)
var cssLoaded = window.getComputedStyle(test).display === "none"
document.head.removeChild(test)
if (!cssLoaded) {
var link = document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
link.href = "lib/bootstrap.min.css";
document.head.appendChild(link);
}
</script>
</head>
<body>
<!-- APP CONTENT -->
<!-- jQuery CDN -->
<script src="~https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!-- jQuery local fallback -->
<script>window.jQuery || document.write('<script src="lib/jquery.min.js"><\/script>')</script>
<!-- Bootstrap JS CDN -->
<script src="~https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!-- Bootstrap JS local fallback -->
<script>if(typeof($.fn.modal) === 'undefined') {document.write('<script src="lib/bootstrap.min.js"><\/script>')}</script>
</body>.visibleкласу замість тестування наrgb(51, 51, 51) .hiddenта .d-noneдля Boostrap 3.x або 4 Document.createElement(), застосувати класи завантаження, використовувати Window.getComputedStyle()для тестування display:none, а потім умовно вставити таблицю стилів за допомогою js.На ваше запитання щодо найкращих практик є дуже багато вагомих причин використовувати CDN у виробничих умовах :
- Це збільшує наявний паралелізм .
- Це збільшує шанси на те, що буде кеш-хіт .
- Це гарантує, що корисна навантаження буде якомога меншою .
- Це зменшує кількість пропускної здатності, використовуваного вашим сервером.
- Це гарантує, що користувач отримає географічно близьку відповідь.
На ваш стурбовальний варіант, будь-який CDN, який важить своєї солі, дозволяє націлити на конкретну версію бібліотеки, щоб ви не випадково вносили порушення змін з кожним випуском.
document.writeЗгідно з mdn о document.write
Примітка : в якості
document.writeзапису в документі потоку , що заходятьdocument.writeна замкнутому (навантаженої) документ автоматично викликаєdocument.open, який очистить документ .
Однак використання тут навмисне. Код потрібно виконати до повного завантаження DOM, а також у правильному порядку. Якщо jQuery виходить з ладу, нам потрібно вставити його в документ, вбудований в документ, перш ніж спробувати завантажити завантажувальний пакет, який спирається на jQuery.
Виведення HTML після завантаження :
В обох цих випадках ми телефонуємо, поки документ ще відкритий, тому він повинен містити вкладений вміст, а не замінювати весь документ. Якщо ви чекаєте до кінця, вам доведеться замінити, document.body.appendChildщоб вставити динамічні джерела.
Убік : у MVC 6 це можна зробити за допомогою помічників тегів посилань та скриптів
<body>елемент. Ця відповідь додає деяку розмітку з .hiddenDIV , а потім робить тест , щоб побачити , якщо це видно: $('#bootstrapCssTest').is(':visible'). Цей клас, ймовірно, набагато рідше може з часом змінитись.
Залежить від конкретного сайту.
У вас багато користувачів? Чи дбаєте ви про пропускну здатність? Чи проблема в роботі (CDN може пришвидшити відповіді)?
Ви можете зв’язатись із конкретною версією:
//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css
Або
//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css
Таким чином, вам не потрібно турбуватися про оновлення бібліотеки, її краща практика постійно оновлюватись.
Я не впевнений, які точні статистичні дані щодо вибору розробників, але ви можете подивитися тут і побачити мільярди запитів, що надсилаються до Bootstrap CDN, що означає, що це надійний і безпечний у використанні.
Я спробував відредагувати відповідь KyleMit, але форум позначив як неправильний відрізний код, навіть це не так, тому я додаю свій внесок внизу:
Оскільки питання позначено як twitter-bootstrap тема (і не тільки twitter-bootstrap-3 ), можливо, корисно буде оновити відповідь на новішу версію Bootstrap.
Оскільки фреймворк додав новий клас для приховування елементів на своїй четвертій версії, ми повинні використовувати .d-noneзамість .hiddenцього випадку.
У цьому випадку все інше залишається незмінним, крім версії lib (звичайно!)
Завдяки @KyleMit Іншим способом повернення назад є використання об'єкта 'window' як під -
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script>
window.jQuery || document.write("<script src='js/jquery.min.js'><\/script>");
</script>Він працює так: Якщо посилання CDN працює, об’єкт 'window' матиме властивість 'jQuery' ще в другій частині сценарію, тобто document.write, буде виконуватися, що вказує на локальну копію.
Відповідь на оригінальне запитання - наявність CDN має багато переваг, таких як швидке завантаження, не впливаючи на ваш сервер та пропускну здатність. Наявність локальної копії має власну вигоду (як допоміжний механізм). У внутрішньомережевій мережі, через налаштування проксі, політики безпеки, посилання CDN може не працювати або якщо посилання CDN не працює, воно може не працювати. Пряма відповідь - мати обоє.
Майже всі публічні CDN досить надійні. Однак, якщо ви турбуєтесь про той час, коли CDN може бути відключений, ви можете завантажити Bootstrap з однієї CDN Bootstrap і резервну копію на альтернативний CDN у випадку, коли перший не працює.
<html>
<head>
<!-- Bootstrap CSS CDN with Fallback -->
<link rel="stylesheet" href="https://pagecdn.io/lib/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha256-YLGeXaapI0/5IgZopewRJcFXomhRMlYYjugPLSyNjTY=" crossorigin="anonymous">
<script>
var test = document.createElement("div")
test.className = "hidden d-none"
document.head.appendChild(test)
var cssLoaded = window.getComputedStyle(test).display === "none"
document.head.removeChild(test)
if (!cssLoaded) {
var link = document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
link.href = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css";
document.head.appendChild(link);
}
</script>
</head>
<body>
<!-- APP CONTENT -->
<!-- jQuery CDN with Fallback -->
<script src="https://pagecdn.io/lib/jquery/3.2.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"><\/script>');</script>
<!-- Bootstrap JS CDN with Fallback -->
<script src="https://pagecdn.io/lib/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha256-CjSoeELFOcH0/uxWu6mC/Vlrc1AARqbm/jiiImDGV3s=" crossorigin="anonymous"></script>
<script>if(typeof($.fn.modal) === 'undefined') {document.write('<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"><\/script>')}</script>
</body>
</html>Про ваше друге занепокоєння: посилання в цій публікації - це жорстко закодовані версії завантажувального і jquery. Тож, навіть якщо бібліотеки завантажувальної програми та jquery постійно розвиваються та отримують нові функції, ваш сайт з часом залишатиметься незмінним.
rgb(51, 51, 51)здається ризикованим - що робити, якщо хтось змінить колір і забуде оновити його? Чи існує більш стабільна властивість, яку можна було б використати?