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

前端 未结 5 446
终归单人心
终归单人心 2020-11-29 14:32

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

相关标签:
5条回答
  • 2020-11-29 14:55

    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 .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

    0 讨论(0)
  • 2020-11-29 14:58

    Almost all public CDNs are pretty reliable. However, if you are worried about that fraction of the time when a CDN might be down, you can load Bootstrap from one Bootstrap CDN, and fallback to an alternative CDN in case the first one is down.

    <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>
    

    About your second concern: The links in this post are hard coded versions of bootstrap and jquery. So, even if the bootstrap and jquery libraries are constantly developed and get new features, your site will stay the same over time.

    0 讨论(0)
  • 2020-11-29 15:05

    I tried to edit the KyleMit's answer but the forum was marking as a wrong indented code, even it wasn't, so I'm adding my contribution right bellow:

    As the question is tagged as a twitter-bootstrap topic (and not only twitter-bootstrap-3 ), maybe it's helpful to update the response for the newer version of Bootstrap.

    As the framework added a new class for hiding elements on its fourth version, we should use .d-none instead of .hidden in this case.

    Everything else remains the same on that case, except the lib version (of course!)

    0 讨论(0)
  • 2020-11-29 15:09

    Depends on the specific site.

    Do you have many users? Do you care about bandwidth usage? Is performance an issue (CDN's can speed up the responses) ?

    You can link to a specific version:

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

    Or

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

    That way you don't have to worry about library updates, its a better practice to keep updated.

    I am not sure what are the exact statistics about developers choice, but you can have a look here and see Billions of requests are sent to Bootstrap CDN, which means it is robust and safe to use.

    0 讨论(0)
  • 2020-11-29 15:11

    Thanks to @KyleMit. Another way of fall back is using 'window' object as under -

    <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
    <script>
    window.jQuery || document.write("<script src='js/jquery.min.js'><\/script>");
    </script>

    It works like this - If the CDN link works, 'window' object will have 'jQuery' property available else the second part of the script i.e. document.write will get executed which points to the local copy.

    Answer to original question - Having CDN has many benefits such as quick downloads without impacting your server and bandwidth. Having a local copy has its own benefit (as a fall back arrangements). On intranet, due to proxy settings, security policies, CDN link may not work or if CDN link is down it may not work. The straight answer is to have both.

    0 讨论(0)
提交回复
热议问题