Как лучше всего использовать Twitter Bootstrap, обратиться к нему из CDN или сделать локальную копию на моем сервере?
Так как Bootstrap продолжает развиваться, я боюсь, если я обращусь к CDN, пользователь со временем увидит разные веб-страницы, и некоторые теги могут даже сломаться. Какой выбор у большинства людей?
Ответы:
Почему не оба ¯ \ _ (ツ) _ / ¯? Скотт Хансельман (Scott Hanselman) написал отличную статью об использовании 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.На ваш вопрос о Best Practices есть много очень веских причин для использования CDN в производственной среде :
- Это увеличивает доступность параллелизма .
- Это увеличивает вероятность попадания в кеш .
- Это гарантирует, что полезная нагрузка будет как можно меньше .
- Это уменьшает количество полосы пропускания, используемой вашим сервером.
- Это гарантирует, что пользователь получит географически близкий ответ.
Что касается вашей работы с версиями, то любой CDN, достойный своего веса, позволяет вам ориентироваться на конкретную версию библиотеки, чтобы случайно не вносить критические изменения в каждом выпуске.
document.writeСогласно МДН на 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, но форум отмечался как неправильный код с отступом, даже это не так, поэтому я добавляю свой вклад прямо ниже:
Поскольку вопрос помечен как твиттер-самозагрузка тема (и не только твиттер-самозагрузки-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)кажется рискованным - что если кто-то изменит цвет и забудет обновить его? Есть ли более стабильное свойство, которое можно использовать?