我应该使用引导从 CDN 或复制到我的服务器？

使用 Bootstrap 的最佳做法是什么，从 CDN 参考它，还是在我的服务器上制作一个本地副本？

由于 Bootstrap 不断发展，我担心如果我参考 CDN，用户会看到不同的网页随着时间的推移，甚至有些标签可能会破碎。大多数人的选择是什么？

92078 次浏览
小开

取决于具体的地点。

你有很多用户吗？ 你关心带宽的使用吗？ 性能是一个问题(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，这意味着它是健壮的，可以安全使用。

小开
最佳答案

为什么不两者兼顾呢？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>

最新情况

最佳实践

关于最佳实践的问题，有很多 在生产环境中使用 CDN 的非常好的理由:

  1. 它增加了可用的 并行性。
  2. 它增加了出现 缓存命中的可能性。
  3. 它确保有效载荷为 越小越好。
  4. 它减少了服务器使用的 带宽数量。
  5. 它确保用户将获得 地理位置相近响应。

对于您的版本控制问题，任何值得称道的 CDN 都允许您针对库的特定版本，这样您就不会在每个版本中意外地引入重大更改。

使用 document.write

根据 document.write上的 mdn

注意 : 当 document.write写入文档 溪流时，在封闭的(加载的)文档上调用 document.write会自动调用 document.open、 这样文件就清白了。

然而，这里的用法是有意的。代码需要在 DOM 完全加载之前以正确的顺序执行。如果 jQuery 失败了，我们需要在尝试加载引导程序之前将其内联地注入到文档中，而引导程序依赖于 jQuery。

加载后 HTML 输出 :

Example Output

但是，在这两个实例中，我们都是在文档仍然打开时调用，因此它应该内联内容，而不是替换整个文档。如果要等到最后，则必须用 document.body.appendChild替换以插入动态源。

除了 : 在 MVC 6中，您可以使用 < a href = “ https://www.davepaquette.com/archive/2015/05/06/link-and-script-tag-helpers-In-mvc6.aspx”rel = “ noReferrer”> link 和 script tag helpers 来完成这项工作

小开

我试图编辑 KyleMit 的回答，但论坛标记为一个错误的缩进代码，即使它不是，所以我添加我的贡献权利如下:

由于这个问题被标记为 主题(而且不仅仅是 主题) ，也许更新新版本的 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 可能出现故障的那部分时间，那么可以从一个 引导 CDN加载 Bootstrap，并在第一个 CDN 出现故障时回退到另一个 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>

关于你的第二个担心: 本文中的链接是 bootstrap 和 jquery 的硬编码版本。因此，即使引导程序和 jquery 库不断开发并获得新的特性，您的站点也会随着时间的推移保持不变。


提交答案