【问题标题】：Bootstrap-4 scripts best location and scripts' tagsBootstrap-4 脚本的最佳位置和脚本的标签
【发布时间】：2019-09-29 23:51:21
【问题描述】：

一个有很多讨论的老话题...... 我读了很多，但仍然不确定......

定位 bootstrap-4 JS 脚本以获得最佳性能的最佳位置和最佳脚本标签（延迟/异步）是什么？

在 Bootstrap 文档中：“将以下 s 放在页面末尾附近，之前正文结束标记

</body>

他们不使用任何脚本标签（延迟/异步）

我阅读了有关脚本标签的信息，有些人写道，在正文结束标签之前定位脚本就像用“defer”标签定位标题。（旧版浏览器除外）有人说“如果脚本还在最后，性能会更好，因为它们稍后会下载”

那么以下是最佳实践吗？？？

在正文结束标记之前定位 jquery/popper/bootstrap，首先使用 jquery 并使用 defer to popper.min.js 和 bootstrap.min.js？

<body>
......
<script  src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script defer src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" ></script>
</body>

或者只是在没有“defer”标签的情况下像引导文档中那样做？？

【问题讨论】：

标签： bootstrap-4 deferred-loading

【解决方案1】：

放在最后是最好的做法，你甚至可以在 body 关闭后编写脚本：从顶部加载一个 html 到按钮，当浏览器到达一个脚本元素时，它会下载（并等待）源代码，所以如果你把它放在最后，页面将加载，然后 js 将被下载。请记住，需要 js 才能使视图动态化，因此在加载页面之前，您不需要以下功能：单击 dropdwon 并查看其内容。 Defer/async 只是实现相同结果的一种方式，但并不完全相同。

【讨论】：

我假设您的意思是在没有“延迟”的情况下放在最后？
所以通常最好将加载时页面不使用的任何脚本放在末尾而不是使用 defer/async 的开头（在头部）？
视情况而定，将脚本放在 head 部分（不带异步）强制页面下载脚本（如果未缓存），这样会浪费时间，用户可能会开始认为应用程序不起作用.现在我们使用最小版本的 js 文件，网络性能不是问题。当您将脚本放在末尾时，页面会快速呈现，用户必须等到 js 加载后才能使用它们的功能，但下载 fex MB 速度很快。
感谢 GJCode :)，这很清楚，但是在 Head+defer/async 或 Body end without defer/async 选项之间？
正文没有 defer :)

【解决方案2】：

头部用于外部资源

最好的做法是在文档开头排除所有依赖项。 <head> 正是为此而生的。由于在页面加载的那一刻没有加载 DOM，这将使所有对 DOM 的引用失败。在 defer 之前曾经有一个（黑暗的）时间，通常会建议将脚本包含在 </body> 之后但在 </html> 之前。

但是如果脚本资源确实加载到了头部，有一些更好的解决方案来处理这个问题：

事件处理程序

一个技巧是等待 DOM 加载 DOMContentloaded event handler。该事件将在 DOM 加载并准备就绪后立即触发。这可以与async 结合使用，以加快页面加载的感知速度。

推迟

由于相当长的一段时间，可以将 JavaScript 的执行推迟到页面加载之后。 script src= 上的属性 defer 将按引用顺序排列 JavaScript。

异步

属性async在页面加载后不一定会执行脚本，它只是建议浏览器不要等待JavaScript（块）的下载和执行，而是执行它与页面渲染并行。加载顺序无法保证。

这适用于不直接依赖于页面内容或其他资源的 JavaScript 中的业务逻辑。 (https://javascript.info/script-async-defer)。将bootstrap.min.js 包含在async 中很可能无法产生预期的结果。

WordPress

目前，但这很可能会改变，没有诡计，WordPress 不会推迟 JavaScript。你可以依靠插件来做到这一点，或者add a simple function你的functions.php

内嵌 JavaScript

如果 JavaScript 不是从 src 文件中读取但直接包含在 defer 和 async 将被忽略。如果内联 JavaScript 需要等待 DOM 加载，请使用事件侦听器或确实将 <script></script> 放在之前但之后（如果代码在 <html> 之后，大多数浏览器都可以。html5 <html>-tag 在练习可选）

引导

回答您的问题：对我来说，不清楚为什么 Bootstrap 不使用或记录使用 defer 的脚本。最后，他们甚至摆脱了对 jQuery 的依赖，所以我看不出他们为什么仍然这样document。

【讨论】：