Can Bootstrap be loaded asynchronously?

Bootstrap.js requires jquery to run. If you are looking to get the benefit of loading async script, then you would probably want to load jquery (and potentially other libraries) async as well... The problem with this is that you would have no guarantee that jquery async finished before the bootstrap using the example code above. I'm also sure you have your own javascript that you want to write to use the bootstrap.js features. This means even more dependencies. You could write logic to wire up dependencies and async load manually, but this would become a lot of work as the number of scripts you might need to include increase.

Requirejs is a library that takes care of all this dependency management for you, and can load your files asynchronously (and in the correct order). Another benefit of this library is the optimizer which can trace dependencies and "burn" them into a single (optionally minified) file. After you use the optimizer to optimize your "main" js file (the one with all the dependencies you need for the page), requireJS can just load that file asynchronously. Only need one script include!

An example would look like:

/app/main.js:

requirejs.config({
    paths: {
        jquery: "lib/jquery-1.11.0",
        bootstrap: "lib/bootstrap"
    },
    shim: {
        bootstrap: {
            deps: ['jquery']
        }
    }
});

//Define dependencies and pass a callback when dependencies have been loaded
require(["jquery", "bootstrap"], function ($) {
    //Bootstrap and jquery are ready to use here
    //Access jquery and bootstrap plugins with $ variable
});

jquery.js and bootstrap.js would live under /app/lib in this case (along with require.js).

In your HTML you would have this script tag:

<script src="/app/lib/require.js" data-main="/app/main"></script>

This would load in bootstrap and jquery (in the correct order) and then pass those modules as parameter(s) (only jquery/$ is needed since bootstrap is just a plugin on top of jquery) to your callback function.

So taking Patrick's excellent answer (which helped me a lot), if you run your site against https://developers.google.com/speed/pagespeed/insights/ it will still give you a warning that

Eliminate render-blocking JavaScript and CSS in above-the-fold content
Your page has 1 blocking script resources
Remove render-blocking JavaScript:
http://mydomain/js/require.js

But taking the OP setup (and the one Google recommends) you can do this just before the </body> tag

<script type="text/javascript">
  function requireJSOnload() {
    var element = document.createElement("script");
    element.src = "/js/require.js";
    element.setAttribute('data-main', '/js/main');
    document.body.appendChild(element);
  }
  if (window.addEventListener)
    window.addEventListener("load", requireJSOnload, false);
  else if (window.attachEvent)
    window.attachEvent("onload", requireJSOnload);
  else window.onload = requireJSOnload;
</script>

Now when you run against https://developers.google.com/speed/pagespeed/insights/ you will have no JS blocking scripts.