使用 Twitter Bootstrap 的最佳实践是什么？从 CDN 引用它还是在我的服务器上制作本地副本？
由于Bootstrap不断发展，恐怕如果引用CDN，随着时间的推移，用户会看到不同的网页，甚至有些标签可能会损坏。大多数人的选择是什么？
最佳答案
Why Not Both ¯\(ツ)/¯ ? Scott Hanselman 有一篇很棒的文章，介绍如何优雅地使用 CDN 来提高性能 falling back to a local copy in case the CDN is down .
具体到bootstrap，您可以对 load from a CDN with a local fallback 执行以下操作:
Working Demo in 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>
更新
- 截至 2021 年，all major browsers double partition http cache keys与请求者的顶级域一起使用，因此您将不再从其他网站上以前的缓存命中中获得性能优势。
- 您也可以做同样的测试 using YepNope or fallback.js
- 根据Flash's comment和 this solution ，更新了答案以检查
.visible类，而不是测试rgb(51, 51, 51) - 根据deste's comment ，更新为对 Boostrap 3.x 或 4 使用
.hidden和.d-none - 当 testing if a stylesheet loaded ，您必须查找将应用的样式，创建一个元素，然后查看它是否已应用。
- 使用 vanilla js 更新了样式表以立即加载到 head 中。您需要使用
Document.createElement()创建一个测试元素，应用 Bootstrap 类，使用Window.getComputedStyle()测试display:none，然后有条件地 insert a stylesheet使用js。
最佳实践
对于您关于最佳实践的问题，有很多 very good reasons to use a CDN in a production environment :
- It increases the parallelism available.
- It increases the chance that there will be a cache-hit.
It ensures that the payload will be as small as possible.update- It reduces the amount of bandwidth used by your server.
- It ensures that the user will get a geographically close response.
对于您的版本控制问题，任何值得一提的 CDN 都可以让您针对特定版本的库，这样您就不会意外地在每个版本中引入重大更改。
使用document.write
根据mdn document.write
Note: as
document.writewrites to the document stream, callingdocument.writeon a closed (loaded) document automatically callsdocument.open, which will clear the document.
但是，这里的用法是有意的。该代码需要在 DOM 完全加载之前执行，并且执行顺序正确。如果 jQuery 失败，我们需要在尝试加载依赖于 jQuery 的 bootstrap 之前将其内联注入(inject)到文档中。
加载后的 HTML 输出:
在这两种情况下，我们都是在文档仍然打开的情况下调用的，因此它应该内联内容，而不是替换整个文档。如果您等到最后，则必须替换为 document.body.appendChild 才能插入动态源。
Aside: In MVC 6, you can do this with link and script tag helpers
关于twitter-bootstrap - 我应该使用 CDN 中的 Bootstrap 还是在我的服务器上复制？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26192897/