使用 Twitter Bootstrap、从 CDN 引用它或在我的服务器上制作本地副本的最佳实践是什么?
由于 Bootstrap 一直在发展,如果我参考 CDN,恐怕随着时间的推移,用户会看到不同的网页,甚至有些标签可能会损坏。大多数人的选择是什么?
为什么不是两 Scott Hanselman 有一篇很棒的文章,介绍了使用 CDN 来提高性能,但在 CDN 出现故障时优雅地退回到本地副本。
特定于引导程序,您可以执行以下操作以从具有本地回退的 CDN 加载:
<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 有很多很好的理由
它增加了可用的 并行度 。 它增加了 缓存命中 的机会。 它确保有效载荷尽可能 小 。 它减少了服务器使用的 带宽量。 它确保用户将获得 地理上接近 的响应。
对于您的版本控制问题,任何有价值的 CDN 都可以让您针对特定版本的库,这样您就不会意外地在每个版本中引入重大更改。
document.write
根据 mdn 上document.write
注意 :在document.write写入文档 流 时,调用document.write已关闭(加载)的文档会自动调用document.open,这将清除文档。
document.open
但是,这里的使用是有意的。代码需要在 DOM 完全加载之前以正确的顺序执行。如果 jQuery 失败,我们需要在尝试加载依赖于 jQuery 的引导程序之前将其内联注入到文档中。
加载后的 HTML 输出 :
不过,在这两种情况下,我们都会在文档仍处于打开状态时调用,因此它应该内联内容,而不是替换整个文档。如果您要等到最后,则必须替换为document.body.appendChild以插入动态源。
document.body.appendChild
旁白 :在 MVC 6 中,您可以使用链接和脚本标签助手来执行此操作