sha*_*are 131 twitter-bootstrap twitter-bootstrap-3
使用Twitter Bootstrap的最佳做法是什么,从CDN引用它或在我的服务器上制作本地副本？
由于Bootstrap不断发展,我担心如果我引用CDN,用户会随着时间的推移看到不同的网页,有些标签甚至可能会被破坏.什么是大多数人的选择？
Kyl*_*Mit 196
为什么不两者¯\ _(ツ)_ /¯？ 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>
*您也可以做同样的测试使用YepNope或fallback.js
每*Flash的评论和这个解决方案,更新的答案检查.visible类,而不是测试rgb(51, 51, 51)
*当测试如果一个样式表加载,你必须寻找一个风格将有已应用,创建一个元素,并查看它是否已被应用.
关于最佳实践的问题,在生产环境中使用CDN有很多很好的理由:
- 它增加了可用的并行性.
- 它增加了缓存命中的可能性.
- 它确保有效载荷尽可能小.
- 它减少了服务器使用的带宽量.
- 它确保用户获得地理上接近的响应.
对于您的版本控制问题,任何值得重视的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,这意味着它可靠且安全.
几乎所有公共 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>
关于你的第二个问题： 这篇文章中的链接是 bootstrap 和 jquery 的硬编码版本。因此，即使引导程序和 jquery 库不断开发并获得新功能，您的站点也会随着时间的推移保持不变。
| 归档时间： |
|
| 查看次数： |
61698 次 |
| 最近记录： |