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

Question

提问by shapeare

What's the best practice of using Twitter Bootstrap, refer to it from CDN or make a local copy on my server?

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

Since Bootstrap keeps evolving, I am afraid if I refer to the CDN, the user would see different webpages over time, and some tags may even broken. What's most people's choice?

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

Answer 1

回答by KyleMit

Why Not Both ˉ\_(ツ)_/ˉ ?Scott Hanselman has a great article on using a CDN for performance gains but gracefully falling back to a local copy in case the CDN is down.

为什么不是 ˉ\_(ツ)_/ˉ ？Scott Hanselman 有一篇很棒的文章，介绍了使用 CDN 来提高性能，但在 CDN 关闭的情况下优雅地回退到本地副本。

Specific to bootstrap, you can do the following to load from a CDN with a local fallback:

特定于引导程序，您可以执行以下操作以从具有本地回退的 CDN 加载：

Working Demo in Plunker

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>

Updates

更新

you can also do the same test using YepNope or fallback.js
per Flash's commentand this solution, updated answer to check for .visibleclass instead of testing for rgb(51, 51, 51)
per deste's comment, updated to use .hiddenand .d-nonefor either Boostrap 3.x or 4
when testing if a stylesheet loaded, you have to look for a style that wouldhave been applied, create an element, and see if it has been applied.
Updated the stylesheet to load immediately in the head by using vanilla js. You need to create a test element using Document?.create?Element(), apply bootstrap classes, use Window?.get?Computed?Style()to test for display:none, and then conditionally insert a stylesheetusing js.

你也可以使用 YepNope 或 fallback.js做同样的测试
根据Flash 的评论和此解决方案，更新了检查.visible类而不是测试的答案rgb(51, 51, 51)
每德斯特的评论，更新为使用.hidden并.d-none用于任何自举3.x或4
当测试如果一个样式表加载，你必须寻找一个风格就已经应用，创建一个元素，看看是否已经应用它。
使用 vanilla js 更新样式表以立即加载到头部。您需要使用来创建测试元素Document?.create?Element()，应用引导类，使用Window?.get?Computed?Style()来测试display:none，然后使用 js有条件地插入样式表。

Best Practices

最佳实践

To your question on Best Practices, there are a lot of very good reasons to use a CDNin a production environment:

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

It increases the parallelismavailable.
It increases the chance that there will be a cache-hit.
It ensures that the payload will be as small as possible.
It reduces the amount of bandwidthused by your server.
It ensures that the user will get a geographically closeresponse.

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

To your versioning concern, any CDN worth its weight in salt with let you target a specific version of the library so you don't accidentally introduce breaking changes with each release.

对于您的版本控制而言，任何值得一提的 CDN 都可以让您定位特定版本的库，这样您就不会意外地在每个版本中引入破坏性更改。

Using `document.write`

使用 `document.write`

According to the mdn on document.write

根据 mdn 上 document.write

Note: as document.writewrites to the document stream, calling document.writeon a closed (loaded) document automatically calls document.open, which will clear the document.

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

However, the usage here is intentional. The code needs to be executed before the DOM is fully loaded and also in the correct order. If jQuery fails, we need to inject it into the document inline before we attempt to load bootstrap, which relies on jQuery.

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

HTML Output After Load:

加载后的 HTML 输出：

In both of these instances though, we're calling while the document is still open so it should inline the contents, rather than replacing the entire document. If you're waiting till the end, you'll have to replace with document.body.appendChildto insert dynamic sources.

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

Aside: In MVC 6, you can do this with link and script tag helpers

旁白：在 MVC 6 中，您可以使用链接和脚本标签助手来做到这一点

Answer 2

回答by Ofiris

Depends on the specific site.

要看具体的网站。

Do you have many users? Do you care about bandwidth usage? Is performance an issue (CDN's can speed upthe responses) ?

你有很多用户吗？您关心带宽使用情况吗？性能是否是一个问题（CDN可以加快响应速度）？

You can link to a specific version:

您可以链接到特定版本：

//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css

Or

或者

//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css

That way you don't have to worry about library updates, its a better practice to keep updated.

这样您就不必担心库更新，保持更新是更好的做法。

I am not sure what are the exact statistics about developers choice, but you can have a look hereand see Billions of requests are sent to Bootstrap CDN, which means it is robust and safe to use.

我不确定关于开发人员选择的确切统计数据是什么，但您可以查看这里并看到数十亿个请求被发送到 Bootstrap CDN，这意味着它很健壮且使用安全。

Answer 3

回答by André Rocha

I tried to edit the KyleMit's answerbut the forum was marking as a wrong indented code, even it wasn't, so I'm adding my contribution right bellow:

我试图编辑KyleMit 的答案，但论坛被标记为错误的缩进代码，即使它不是，所以我在下面添加我的贡献：

As the question is tagged as a twitter-bootstraptopic (and not only twitter-bootstrap-3), maybe it's helpful to update the response for the newer version of Bootstrap.

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

As the framework added a new class for hiding elements on its fourth version, we should use .d-noneinstead of .hiddenin this case.

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

Everything else remains the same on that case, except the lib version (of course!)

在这种情况下，其他所有内容都保持不变，除了 lib 版本（当然！）

Answer 4

回答by Anand

Thanks to @KyleMit. Another way of fall back is using 'window' object as under -

感谢@KyleMit。另一种回退的方法是使用“窗口”对象作为 -

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

It works like this - If the CDN link works, 'window' object will have 'jQuery' property available else the second part of the script i.e. document.write will get executed which points to the local copy.

它是这样工作的 - 如果 CDN 链接有效，'window' 对象将有 'jQuery' 属性可用，否则脚本的第二部分即 document.write 将被执行，它指向本地副本。

Answer to original question - Having CDN has many benefits such as quick downloads without impacting your server and bandwidth. Having a local copy has its own benefit (as a fall back arrangements). On intranet, due to proxy settings, security policies, CDN link may not work or if CDN link is down it may not work. The straight answer is to have both.

对原始问题的回答 - 拥有 CDN 有许多好处，例如快速下载而不影响您的服务器和带宽。拥有本地副本有其自身的好处（作为后备安排）。在内网中，由于代理设置、安全策略，CDN 链接可能无法正常工作，或者如果 CDN 链接已关闭则可能无法工作。直接的答案是两者兼而有之。

Answer 5

回答by Hamid Sarfraz

Almost all public CDNs are pretty reliable. However, if you are worried about that fraction of the time when a CDN might be down, you can load Bootstrap from one Bootstrap CDN, and fallback to an alternative CDN in case the first one is down.

几乎所有公共 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>

About your second concern:The links in this post are hard coded versions of bootstrap and jquery. So, even if the bootstrap and jquery libraries are constantly developed and get new features, your site will stay the same over time.

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

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

提问by shapeare

回答by KyleMit

Working Demo in Plunker

Plunker 中的工作演示

Updates

更新

Best Practices

最佳实践

Using `document.write`

使用 `document.write`

回答by Ofiris

回答by André Rocha

回答by Anand

回答by Hamid Sarfraz

相关推荐

最近更新

标签

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

提问by shapeare

回答by KyleMit

Working Demo in Plunker

Plunker 中的工作演示

Updates

更新

Best Practices

最佳实践

Using document.write

使用 document.write

回答by Ofiris

回答by André Rocha

回答by Anand

回答by Hamid Sarfraz

相关推荐

twitter-bootstrap 如何使用 Bootstrap config.json 文件？

twitter-bootstrap Bootstrap 导航栏固定顶部高度

twitter-bootstrap 如何从 Bootstrap Multi-Select 返回文本值

twitter-bootstrap 在折叠的 Bootstrap 手风琴中开始时，所选下拉菜单的宽度接近于零

相关推荐

最近更新

标签

Using `document.write`

使用 `document.write`