Should I use Bootstrap from CDN or make a copy on my server?

Question

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

Answer 1

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

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 .visible class instead of testing for rgb(51, 51, 51)
• per deste's comment, updated to use .hidden and .d-none for 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​.create​Element(), apply bootstrap classes, use Window​.get​Computed​Style() to test for display: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:

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.
4. It reduces the amount of bandwidth used by your server.
5. 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.write writes to the document stream, calling document.write on a closed (loaded) document automatically calls document.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