twitter-bootstrap Bootstrap 可以异步加载吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24831093/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can Bootstrap be loaded asynchronously?
提问by Nate
I have not used Bootstrap for very long and am unsure of whether it needs to be loaded non-asynchronously in the <head>for page-building purposes.
我很久没有使用 Bootstrap 了，我不确定它是否需要在<head>页面构建中非异步加载。
Google suggestsusing this code to load JS files asynchronously:
Google 建议使用此代码异步加载 JS 文件：
<script type="text/javascript">
// Add a script element as a child of the body
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "deferredfunctions.js";
document.body.appendChild(element);
}
// Check for browser support of event handling capability
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
Can I load bootstrap.min.jsin this fashion, or should I load it non-asynchronously?
我可以bootstrap.min.js以这种方式加载，还是应该非异步加载？
回答by Patrick
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 couldwrite 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.
Bootstrap.js 需要 jquery 才能运行。如果您希望获得加载异步脚本的好处，那么您可能还希望异步加载 jquery（以及可能的其他库）......这样做的问题是您无法保证 jquery 异步在加载之前完成使用上面的示例代码进行引导。我也确定您有自己的 javascript 想要编写以使用 bootstrap.js 功能。这意味着更多的依赖。您可以编写逻辑来手动连接依赖项和异步加载，但是随着您可能需要包含的脚本数量增加，这将成为大量工作。
Requirejsis 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!
Requirejs是一个为您处理所有这些依赖项管理的库，并且可以异步加载您的文件（并以正确的顺序）。这个库的另一个好处是优化器，它可以跟踪依赖关系并将它们“刻录”到单个（可选缩小）文件中。在使用优化器优化“主”js 文件（具有页面所需的所有依赖项的文件）后，requireJS 可以异步加载该文件。只需要包含一个脚本！
An example would look like:
一个例子看起来像：
/app/main.js:
/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).
在这种情况下，jquery.js 和 bootstrap.js 将位于 /app/lib 下（与 require.js 一起）。
In your HTML you would have this script tag:
在你的 HTML 中，你会有这个脚本标签：
<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.
这将加载 bootstrap 和 jquery（以正确的顺序），然后将这些模块作为参数（只需要 jquery/$，因为 bootstrap 只是 jquery 之上的一个插件）传递给您的回调函数。
回答by Richlewis
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
因此，采用 Patrick 的出色回答（这对我有很大帮助），如果您针对https://developers.google.com/speed/pagespeed/insights/运行您的网站，它仍会警告您
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
但是采用 OP 设置（以及 Google 推荐的设置），您可以在</body>标记之前执行此操作
<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.
现在，当您针对https://developers.google.com/speed/pagespeed/insights/运行时，您将没有 JS 阻止脚本。
