gpt4 book ai didi

twitter-bootstrap - 我应该使用 CDN 中的 Bootstrap 还是在我的服务器上复制?

转载 作者:行者123 更新时间:2023-12-03 04:29:47 25 4
gpt4 key购买 nike

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

由于Bootstrap不断发展,恐怕如果引用CDN,随着时间的推移,用户会看到不同的网页,甚至有些标签可能会损坏。大多数人的选择是什么?

最佳答案

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. It increases the parallelism available.
  2. It increases the chance that there will be a cache-hit.
  3. It ensures that the payload will be as small as possible. update
  4. It reduces the amount of bandwidth used by your server.
  5. It ensures that the user will get a geographically close response.

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

使用document.write

根据mdn document.write

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

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

加载后的 HTML 输出:

Example Output

在这两种情况下,我们都是在文档仍然打开的情况下调用的,因此它应该内联内容,而不是替换整个文档。如果您等到最后,则必须替换为 document.body.appendChild 才能插入动态源。

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

关于twitter-bootstrap - 我应该使用 CDN 中的 Bootstrap 还是在我的服务器上复制?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26192897/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com