我应该使用CDN的Bootstrap还是在我的服务器上复制一份？

时间：2014-10-04 12:38:22

标签： twitter-bootstrap twitter-bootstrap-3

使用Twitter Bootstrap的最佳做法是什么，从CDN引用它或在我的服务器上制作本地副本？

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

5 个答案:

答案 0 :(得分：178)

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>

更新

最佳实践

关于最佳做法的问题，有很多very good reasons to use a CDN in a production environment：

  
      
  1. 增加了并行度。
    2.   
  2. 这会增加缓存命中的可能性。
    3.   
  3. 确保有效负载尽可能小。
    4.   
  4. 它减少了服务器使用的带宽的数量。
    5.   
  5. 确保用户获得地理位置接近响应。
    6.   

对于您的版本控制问题，任何值得注重的CDN都可以让您定位特定版本的库，这样您就不会在每次发布时不小心引入重大更改。

使用document.write

根据document.write

上的mdn
  

注意：当document.write写入文档流时，在已关闭（已加载）的文档上调用document.write会自动调用{{1} }，which will clear the document。

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

加载后

HTML输出：

Example Output

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

答案 1 :(得分：9)

取决于具体网站。

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

答案 2 :(得分：1)

我尝试编辑KyleMit's answer，但论坛标记为错误的缩进代码，即使它不是，所以我正在添加我的贡献：

由于问题被标记为主题（而不仅仅是），因此更新较新版Bootstrap的响应可能会有所帮助。

由于框架在其第四个版本中添加了一个隐藏元素的新类，在这种情况下我们应该使用.d-none而不是.hidden。

除了lib版本（当然！）之外，其他所有内容都是相同的。

答案 3 :(得分：0)

感谢@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具有许多优点，例如快速下载而不会影响服务器和带宽。拥有本地副本有其自身的好处（作为后备安排）。在Intranet上，由于代理设置，安全策略，CDN链接可能不起作用，或者如果CDN链接断开，它可能不起作用。直接的答案是两者都有。

答案 4 :(得分：0)

几乎所有公共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库不断开发并获得新功能，您的网站也会随着时间的推移保持不变。

相关问题
最新问题