1. 首页
  2. 问题
  3. 我应该使用 CDN 中的 Bootstrap 还是在我的服务器上制作副本？
小编典典

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

all

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

由于 Bootstrap 一直在发展，如果我参考 CDN，恐怕随着时间的推移，用户会看到不同的网页，甚至有些标签可能会损坏。大多数人的选择是什么？


阅读 93

收藏
2022-08-27

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

最佳实践

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

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

对于您的版本控制问题，任何有价值的 CDN 都可以让您针对特定版本的库，这样您就不会意外地在每个版本中引入重大更改。

使用document.write

根据 mdn 上document.write

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

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

加载后的 HTML 输出 ：

示例输出

不过，在这两种情况下，我们都会在文档仍处于打开状态时调用，因此它应该内联内容，而不是替换整个文档。如果您要等到最后，则必须替换为document.body.appendChild以插入动态源。

旁白 ：在 MVC 6
中，您可以使用链接和脚本标签助手来执行此操作

2022-08-27