Fatal编程技术网
  • twitter-bootstrap/
  • Twitter bootstrap 我应该从CDN使用引导还是在服务器上复制？

Twitter bootstrap 我应该从CDN使用引导还是在服务器上复制？

twitter-bootstrap twitter-bootstrap-3

Twitter bootstrap 我应该从CDN使用引导还是在服务器上复制？,twitter-bootstrap,twitter-bootstrap-3,Twitter Bootstrap,Twitter Bootstrap 3,使用Twitter引导的最佳实践是什么，从CDN引用它或在我的服务器上制作本地副本 由于Bootstrap不断发展，我担心如果我参考CDN，用户会随着时间的推移看到不同的网页，一些标签甚至可能损坏。大多数人的选择是什么？取决于具体的网站 你有很多用户吗？ 你关心带宽使用情况吗？ 性能是否是一个问题（CDN的回答） 您可以链接到特定版本： //maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css 或 //maxcdn.boots

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

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

取决于具体的网站

你有很多用户吗？ 你关心带宽使用情况吗？ 性能是否是一个问题（CDN的回答）

您可以链接到特定版本：

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

或

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

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

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

Scott Hanselman有一篇关于使用CDN提高性能的伟大文章，但很优雅

特定于引导，您可以执行以下操作：


var test=document.createElement（“div”）
test.className=“隐藏的d-none”
文件头附件子项（测试）
var cssLoaded=window.getComputedStyle（测试）。显示==“无”
文件头移除儿童（测试）
如果（！cssLoaded）{
var link=document.createElement（“链接”）；
link.type=“text/css”；
link.rel=“样式表”；
link.href=“lib/bootstrap.min.css”；
document.head.appendChild（链接）；
}
window.jQuery | | document.write（“”）
if（typeof（$.fn.modal）=='undefined'）{document.write（''''）}
更新
  • 你也可以做同样的测试
  • 根据和，更新答案以检查
    .visible
    类，而不是测试
    rgb（51,51,51）
  • 根据，更新为对Boostrap 3.x或4使用
    .hidden
    和
    .d-none
  • 当出现这种情况时，您必须查找本应应用的样式，创建一个元素，并查看是否已应用该样式
  • 使用vanilla js更新样式表以立即在头部加载。您需要使用创建一个测试元素，应用引导类，用于测试
    display:none
    ，然后有条件地使用js
最佳做法 对于您关于最佳实践的问题，有很多：

  • 它增加了可用的并行性
  • 它增加了缓存命中的可能性
  • 它确保有效负载尽可能小
  • 它减少了服务器使用的带宽量
  • 它确保用户将获得地理位置接近的响应
    • 对于您的版本控制来说，任何与之相称的CDN都允许您针对库的特定版本，这样您就不会意外地在每个版本中引入破坏性的更改

    使用
    文档。编写
    
根据上的mdn
    
注意：作为
    文档。写入
    写入文档流，调用
    文档。在关闭（加载）的文档上写入
    会自动调用
    文档。打开
    
然而，这里的用法是有意的。在DOM完全加载之前，还需要按照正确的顺序执行代码。如果jQuery失败，我们需要在尝试加载依赖于jQuery的引导程序之前将其插入到文档内联中
    
加载后的HTML输出：
    

    
但在这两种情况下，我们都是在文档仍处于打开状态时调用，因此它应该内联内容，而不是替换整个文档。如果要等到结尾，则必须替换为
    document.body.appendChild
    以插入动态源
    
旁白：在MVC6中，您可以使用
    
我试图编辑，但论坛标记为错误的缩进代码，即使不是这样，因此我将在下面添加我的贡献：
    
由于问题被标记为一个主题（而不仅仅是一个主题），因此更新更新版本引导的响应可能会有所帮助
    
由于框架在第四个版本中添加了一个用于隐藏元素的新类，因此在本例中，我们应该使用
    .d-none
    而不是
    .hidden
    

    在这种情况下，除了lib版本（当然！），其他所有内容都保持不变。
    多亏了@KyleMit。另一种方法是使用“窗口”对象，如下所示-
    


    
window.jQuery | | document.write（“”）；

    几乎所有公共CDN都非常可靠。但是，如果您担心CDN可能出现故障的那一部分时间，您可以从一个CDN加载引导，并在第一个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>

    

    
var test=document.createElement（“div”）
test.className=“隐藏的d-none”
文件头附件子项（测试）
var cssLoaded=window.getComputedStyle（测试）。显示==“无”
文件头移除儿童（测试）
如果（！cssLoaded）{
var link=document.createElement（“链接”）；
link.type=“text/css”；
link.rel=“样式表”；
link.href=”https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css";
document.head.appendChild（链接）；
}
window.jQuery | | document.write（“”）；
if（typeof（$.fn.modal）=='undefined'）{document.write（''''）}

    
关于第二个问题：

    本文中的链接是bootstrap和jquery的硬编码版本。因此，即使引导库和jquery库不断开发并获得新功能，您的站点也将保持不变。
    最后一个链接已断开。@nutarman，