我应该从CDN使用Bootstrap还是在我的服务器上制作一个副本？

goucqfw6 于 2023-03-06 发布在 Bootstrap

关注(0)|答案(5)|浏览(152)

使用Twitter Bootstrap的最佳实践是什么，从CDN引用它还是在我的服务器上制作一个本地副本？
由于Bootstrap一直在发展，我担心如果我提到CDN，用户会看到不同的网页，甚至一些标签可能会损坏。

twitter-bootstrap

来源：https://stackoverflow.com/questions/26192897/should-i-use-bootstrap-from-cdn-or-make-a-copy-on-my-server

5条答案

按热度按时间

yzxexxkh1#

Scott Hanselman有一篇很棒的文章，介绍了如何使用CDN来获得性能提升，但不失优雅地falling back to a local copy in case the CDN is down。
具体到引导，您可以对load from a CDN with a local fallback执行以下操作：
∮ ∮ ∮ ∮ ∮

<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>

更新

您也可以执行相同的测试using YepNope or fallback.js
根据Flash的评论和this solution，更新答案以检查.visible类，而不是测试rgb(51, 51, 51)
根据目标的评论，更新为使用.hidden和.d-none用于Boostrap 3.x或4
当testing if a stylesheet loaded时，你必须寻找一个 * 会 * 已经应用的样式，创建一个元素，看看它是否已经应用。
使用vanilla js更新了样式表以立即加载到头部。您需要使用Document.createElement()创建一个测试元素，应用引导类，使用Window.getComputedStyle()测试display:none，然后使用js有条件地使用insert a stylesheet。

最佳实践

关于您提出的最佳实践问题，有很多very good reasons to use a CDN in a production environment：
1.它增加了可用的并行度。
1.它增加了发生缓存命中的机会。
1.它确保有效负载尽可能小。
1.它可以减少服务器使用的带宽。
1.它确保用户将获得地理位置相近的响应。
对于您的版本控制问题，任何值得信任的CDN都允许您将库的特定版本作为目标，这样您就不会意外地在每个版本中引入破坏性的更改。

使用`document.write`

根据document.write上的mdn

- 注意**：当document.write写入文档stream时，在关闭（加载）的文档上调用document.write会自动调用document.open，这将清除文档。

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

加载后的HTML输出 *：

在这两种情况下，我们都是在文档仍然打开的时候调用的，所以它应该内联内容，而不是替换整个文档。如果你要等到最后，你必须替换为document.body.appendChild来插入动态源。

- 题外话**：在MVC 6中，您可以使用link and script tag helpers完成此操作

赞(0）回复(0）举报 2023-03-06

rryofs0p2#

取决于具体的网站。
你有很多用户吗？你关心带宽使用吗？性能是个问题吗（CDN的can speed up响应）？
您可以链接到特定版本：
//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css
或者
//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css
这样你就不必担心库的更新，保持更新是一个更好的做法。
我不知道关于开发者选择的确切统计数据是什么，但你可以看看here，看到数十亿的请求被发送到Bootstrap CDN，这意味着它是健壮和安全的使用。

赞(0）回复(0）举报 2023-03-06

kmynzznz3#

几乎所有的公共CDN都非常可靠。但是，如果您担心CDN可能会在一小部分时间内出现故障，您可以从一个Bootstrap 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的硬编码版本，所以，即使bootstrap和jquery库不断地开发并获得新的特性，你的站点也会随着时间的推移保持不变。

赞(0）回复(0）举报 2023-03-06

fgw7neuy4#

我试图编辑KyleMit's answer，但论坛标记为一个错误的缩进代码，即使它不是，所以我添加我的贡献右below：
由于该问题被标记为twitter-bootstrap主题（而不仅仅是twitter-bootstrap-3），因此更新Bootstrap新版本的响应可能会有所帮助。
由于框架在其第四个版本中添加了一个用于隐藏元素的新类，因此在本例中我们应该使用.d-none而不是.hidden。
在这种情况下，除了lib版本（当然！）之外，其他一切都保持不变。

赞(0）回复(0）举报 2023-03-06

2sbarzqh5#

感谢@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链接关闭，它可能无法工作。直接的答案是两者都有。

赞(0）回复(0）举报 2023-03-06

我来回答

我应该从CDN使用Bootstrap还是在我的服务器上制作一个副本？

5条答案

更新

最佳实践

使用`document.write`

相关问题

热门标签

最新问答

我应该从CDN使用Bootstrap还是在我的服务器上制作一个副本？

5条答案

更新

最佳实践

使用document.write

相关问题

热门标签

最新问答

使用`document.write`