Bootstrap 可以异步加载吗？答案

【问题标题】：Can Bootstrap be loaded asynchronously?Bootstrap 可以异步加载吗？
【发布时间】：2014-09-09 22:49:42
【问题描述】：

我已经很久没有使用 Bootstrap 并且不确定是否需要在 <head> 中非异步加载它以用于页面构建。

Google suggests使用这段代码异步加载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>

我可以以这种方式加载bootstrap.min.js，还是应该非异步加载？

【问题讨论】：

你为什么不试试看它是否有效？
@adeneo 因为 Bootstrap 是一个非常大的库，我无法测试整个东西以查看异步加载是否会导致任何问题。
Bootstrap 建议在 </body> 之前包含脚本，因此在 DOM 准备好后加载它应该不是问题。

标签： javascript twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

Bootstrap.js 需要 jquery 才能运行。如果您希望获得加载异步脚本的好处，那么您可能还想加载 jquery（以及可能的其他库）异步...问题是您无法保证 jquery async 在使用上面的示例代码进行引导。我还确定您有自己的 javascript 想要编写以使用 bootstrap.js 功能。这意味着更多的依赖。您可以编写逻辑来手动连接依赖项和异步加载，但随着您可能需要包含的脚本数量的增加，这将成为大量工作。

Requirejs 是一个为您处理所有这些依赖关系管理的库，并且可以异步加载您的文件（并且以正确的顺序）。这个库的另一个好处是优化器，它可以跟踪依赖关系并将它们“烧录”到单个（可选缩小）文件中。在您使用优化器优化您的“主”js 文件（包含页面所需的所有依赖项的文件）之后，requireJS 可以异步加载该文件。只需要包含一个脚本！

示例如下：

/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 和 bootstrap.js 将位于 /app/lib 下（与 require.js 一起）。

在你的 HTML 中你会有这个脚本标签：

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

这将在 bootstrap 和 jquery 中加载（以正确的顺序），然后将这些模块作为参数传递（只需要 jquery/$，因为 bootstrap 只是 jquery 之上的一个插件）到你的回调函数。

【讨论】：

github.com/twbs/bootstrap/pull/13904 移除的 Bootstrap UMD 脚手架在这里也可能有用。
使用脚本defer属性加载两个js怎么样？延迟脚本保证按顺序运行。

【解决方案2】：

因此，如果您针对 https://developers.google.com/speed/pagespeed/insights/ 运行您的网站，那么采用 Patrick 的出色回答（这对我很有帮助），它仍然会给您一个警告

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

但采用 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>

现在，当您针对https://developers.google.com/speed/pagespeed/insights/ 运行时，您将没有 JS 阻塞脚本。

【讨论】：

【解决方案3】：

从 Bootstrap 5 开始，可以直接异步加载 JavaScript 文件。

虽然 Patrick 的 answer 对于 Bootstrap 4 及以下版本是正确的，但 Bootstrap 5 删除了 jQuery 依赖项，允许在 async 或 defer 中加载完整的脚本。

【讨论】：