Ответ 1
Почему не оба ¯\_ (ツ) _/¯? Скотт Хансельман (Scott Hanselman) написал отличную статью об использовании CDN для повышения производительности, но изящно прибегает к локальной копии на случай, если CDN не работает.
В зависимости от начальной загрузки вы можете выполнить следующие действия для загрузки из CDN с локальным резервом:
Рабочая демонстрация в Plunker
<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>
Обновления
- Вы также можете сделать тот же тест, используя YepNope или fallback.js
- за флэш-комментарий и это решение, обновленный ответ для проверки класса
.visibleвместо тестирования дляrgb(51, 51, 51) - за комментарий, обновленный для использования
.hiddenи.d-noneдля Boostrap 3.x или 4 - при тестировании, если загружена таблица стилей, вы должны найти стиль, который был бы применен, создать элемент и посмотреть, был ли он применен.
- Обновлена таблица стилей для немедленной загрузки в голове с помощью vanilla js. Вам необходимо создать тестовый элемент с помощью
Document.createElement(), применить классы начальной загрузки, использоватьWindow.getComputedStyle()для проверкиdisplay:none, а затем условно вставить таблицу стилей с помощью js.
Лучшие практики
На ваш вопрос о передовой практике есть много очень веских причин для использования CDN в производственной среде:
- Это увеличивает доступность параллелизма.
- Это увеличивает вероятность попадания в кеш.
- Это гарантирует, что полезная нагрузка будет как можно меньше.
- Это уменьшает количество полосы пропускания, используемой вашим сервером.
- Это гарантирует, что пользователь получит географически близкий ответ.
Что касается вашей работы с версиями, то любой CDN, достойный своего веса, позволяет вам ориентироваться на конкретную версию библиотеки, чтобы вы не случайно вносили критические изменения в каждом выпуске.
Использование document.write
Согласно МДН на document.write
Примечание: когда
document.writeзаписывает в поток документов, вызовdocument.writeдля закрытого (загруженного) документа автоматически вызываетdocument.open, который очищает документ.
Тем не менее, использование здесь является намеренным. Код должен быть выполнен до полной загрузки DOM, а также в правильном порядке. Если jQuery дает сбой, нам нужно вставить его в документ, прежде чем мы попытаемся загрузить начальную загрузку, которая опирается на jQuery.
HTML-вывод после загрузки:
В обоих случаях мы звоним, пока документ еще открыт, поэтому он должен включать содержимое, а не заменять весь документ. Если вы ждете до конца, вам придется заменить на document.body.appendChild для вставки динамических источников.