提问者:小点点

Bootstrap-4脚本最佳位置和脚本标签


一个有很多讨论的老话题。。。我读了很多,但还是不确定。。。

为了获得最佳性能,找到bootstrap-4 JS脚本的最佳位置和最佳脚本标记(延迟/异步)是什么?

在Bootstrap文档中:“将以下内容放在页面末尾附近,在正文结束标记前的右侧

</body>

它们不使用任何脚本标记(延迟/异步)

我读过关于脚本标记的文章,有人写道,在body结束标记之前定位脚本就像用“defer”标记定位标题一样。(除了旧的浏览器)有人说“如果脚本仍在最后,性能会更好,因为它们将在以后下载”

将jquery/popper/bootstrap定位在body closing标记之前,首先使用jquery并使用defer to popper。min.js和引导。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>

或者只做引导文档中没有“延迟”标记的操作??


共2个答案

匿名用户

放在末尾是最好的做法,你甚至可以在主体关闭后编写脚本:html从顶部加载到按钮,当浏览器到达脚本元素时,它下载(并等待)源代码,因此如果你把它放在末尾,页面将加载,然后js将下载。请记住,js需要使视图动态化,因此在加载页面之前,您不需要诸如:单击DropdOn并查看其内容之类的功能。延迟/异步只是实现相同结果的一种方法,但它并不完全相同。

匿名用户

在文档开始时排除所有依赖项是最佳实践。

但是,如果脚本资源确实加载到了头中,则有一些更好的解决方案来处理此问题:

一个技巧是等待DOM加载一个DOMContentload事件处理程序。一旦加载并准备好DOM,事件就会触发。这可以与async相结合,以加快页面加载的感知速度。

由于相当长的一段时间,JavaScript的执行可能会推迟到页面加载之后。scriptsrc=上的属性defer将按照引用顺序对Java脚本进行排队。

属性async不一定会在页面加载后执行脚本,它只是建议浏览器不要等待JavaScript(块)的下载和执行,而是与页面呈现并行执行。装载顺序没有保证。

这对于JavaScript中不直接依赖于页面内容或其他资源的业务逻辑很好。(https://javascript.info/script-async-defer)。包括引导。min.jsasync一起运行很可能无法产生预期的结果。

目前,如果不耍花招,WordPress将不会推迟Javascript的使用,但这种情况很可能会改变。你可以依靠插件来实现这一点,或者在你的函数中添加一个简单的函数。php

如果JavaScript不是从src文件中读取的,而是直接包含在defer中,那么async将被忽略。如果内联JavaScript需要等待DOM加载,请使用事件侦听器,或者确实放置

回答你的问题:对我来说,不清楚为什么Bootstrap没有在脚本中使用或记录延迟的使用。最后,他们甚至摆脱了对jQuery的依赖,所以我看不出为什么他们仍然这样记录它。