1

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

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

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

</body>

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

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

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

在正文结束标记之前定位 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”标签的引导文档中做？

4

2 回答 2

1

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

于 2019-05-13T07:28:48.753 回答
0

头部用于外部资源

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

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

事件处理程序

一个技巧是等待 DOM 加载一个DOMContentloaded 事件处理程序。该事件将在 DOM 加载并准备好后立即触发。这可以与async加快页面加载的感知速度相结合。

推迟

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

异步

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

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

WordPress

目前，但这很可能会改变，没有诡计 WordPress 不会推迟 JavaScript。你可以依靠插件来做到这一点，或者在你的functions.php中添加一个简单的函数

内联 JavaScript

如果 JavaScript 不是从src文件中读取，而是直接包含在其中defer，async则会被忽略。如果内联 JavaScript 需要等待 DOM 加载，请使用事件侦听器或确实放置<script></script>after but before（如果代码在 .html5 之后，大多数浏览器都可以<html>，<html>-tag 实际上是可选的）

引导程序

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

于 2021-06-14T16:22:59.217 回答