我应该从 CDN 使用 Bootstrap 还是在我的服务器上制作副本? [英] Should I use Bootstrap from CDN or make a copy on my server?
问题描述
使用 Twitter Bootstrap、从 CDN 引用它或在我的服务器上制作本地副本的最佳实践是什么?
由于Bootstrap不断发展，我担心如果我参考CDN，随着时间的推移，用户会看到不同的网页，甚至有些标签可能会损坏.大多数人的选择是什么?
不过，在这两种情况下，我们在文档仍处于打开状态时调用，因此它应该内联内容，而不是替换整个文档.如果你一直等到最后，你必须用 document.body.appendChild 替换来插入动态源.
旁白:在 MVC 6 中，您可以使用 链接和脚本标签助手
What's the best practice of using Twitter Bootstrap, refer to it from CDN or make a local copy on my server?
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?
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.
Specific to bootstrap, you can do the following to 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>
Updates
- you can also do the same test using YepNope or fallback.js
- per Flash's comment and this solution, updated answer to check for
.visibleclass instead of testing forrgb(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 would have 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.createElement(), apply bootstrap classes, useWindow.getComputedStyle()to test fordisplay:none, and then conditionally insert a stylesheet using js.
Best Practices
To your question on Best Practices, there are a lot of very good reasons to use a CDN in a production environment:
- It increases the parallelism available.
- 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 bandwidth used by your server.
- It ensures that the user will get a geographically close response.
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.
Using document.write
According to the mdn on document.write
Note: as
document.writewrites to the document stream, callingdocument.writeon a closed (loaded) document automatically callsdocument.open, which will clear the document.
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.
HTML Output After Load:
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.appendChild to insert dynamic sources.
Aside: In MVC 6, you can do this with link and script tag helpers
这篇关于我应该从 CDN 使用 Bootstrap 还是在我的服务器上制作副本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
