Question

我没有长时间使用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，还是应该非异步加载？

Answer 1

Bootstrap.js需要运行jquery。如果您希望获得加载异步脚本的好处，那么您可能希望加载jquery（以及可能的其他库）async ...这个问题是你不能保证jquery async在之前完成使用上面的示例代码的bootstrap。我也确定你有自己想要编写的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上的一个插件）到你的回调函数。 / p>

Answer 2

以为我会根据自己的经验添加这个（感谢很多人可能已经意识到这一点）

因此，如果您针对https://developers.google.com/speed/pagespeed/insights/运行您的网站，那么请Patricks提供出色的答案（这对我有很大帮助，所以非常感谢），它仍然会给您一个警告

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阻止脚本。

希望这有助于某人，这不是为了劫持已发布的优秀答案，只是指出可以做些什么

由于

Answer 3

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

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

可以异步加载Bootstrap吗？

3 个答案: