如何让JQuery和Bootstrap3在Google PageSpeed Insights的世界中协同工作？

自从谷歌上个月宣布在对网站进行排名时将考虑页面速度和负载结构以来，我花了相当多的时间试图找到一种方法来保证JQuery和Bootstrap3仍能很好地相互配合

为了防止css和javascript页面阻塞，我编写了这段代码，以确保在站点底部异步加载所有内容

function loadFirst(filename, filetype) {
    if(filetype == "js") {
        var node = document.createElement('script');
        node.setAttribute("type", "text/javascript");
        node.setAttribute("async", true);
        node.setAttribute("src", filename);
    } else if(filetype == "css") {
        var node = document.createElement("link");
        node.setAttribute("rel", "stylesheet");
        node.setAttribute("type", "text/css");
        node.setAttribute("href", filename);
    }
    if(typeof node != "undefined") {
        var h = document.getElementsByTagName("head")[0];
        h.parentNode.insertBefore(node, h);
    }
}

/* Load all CSS first and JS files for your site here. */
window.addEventListener('load', function() {
    loadFirst("//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js", "js");
    loadFirst("//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css", "css");
    loadFirst("//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js", "js");
    loadFirst("//fonts.googleapis.com/css?family=Open+Sans:300&subset=latin,cyrillic-ext,latin-ext,cyrillic,greek-ext,greek,vietnamese", "css");
});

但是JQuery没有机会在bootstrap.min.js测试JQuery之前完成加载，因此失败了。因此，我所做的部分解决了这个问题的方法是：

//loadFirst("//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js", "js");

并通过以下方式将其加载到javascript之上：

<script async src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

但这会产生：

Uncaught ReferenceError: $ is not defined

我也在绞尽脑汁，试图找到一种方法来保证JQuery在我随后的引导自定义代码开始运行之前完全加载。如果这类代码太复杂，无法在几行代码中编写，那么有没有库已经处理了这个问题

以下是我迄今为止的工作成果：

---

我建议使用脚本加载程序，例如。下面是一些jQuery特定的信息，可以帮助您继续

Uncaught ReferenceError: $ is not defined