一个有很多讨论的老话题。。。我读了很多,但还是不确定。。。
为了获得最佳性能,找到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>
或者只做引导文档中没有“延迟”标记的操作??
放在末尾是最好的做法,你甚至可以在主体关闭后编写脚本:html从顶部加载到按钮,当浏览器到达脚本元素时,它下载(并等待)源代码,因此如果你把它放在末尾,页面将加载,然后js将下载。请记住,js需要使视图动态化,因此在加载页面之前,您不需要诸如:单击DropdOn并查看其内容之类的功能。延迟/异步只是实现相同结果的一种方法,但它并不完全相同。
在文档开始时排除所有依赖项是最佳实践。
但是,如果脚本资源确实加载到了头中,则有一些更好的解决方案来处理此问题:
一个技巧是等待DOM加载一个DOMContentload
事件处理程序。一旦加载并准备好DOM,事件就会触发。这可以与async
相结合,以加快页面加载的感知速度。
由于相当长的一段时间,JavaScript的执行可能会推迟到页面加载之后。scriptsrc=
上的属性defer
将按照引用顺序对Java脚本进行排队。
属性async
不一定会在页面加载后执行脚本,它只是建议浏览器不要等待JavaScript(块)的下载和执行,而是与页面呈现并行执行。装载顺序没有保证。
这对于JavaScript中不直接依赖于页面内容或其他资源的业务逻辑很好。(https://javascript.info/script-async-defer)。包括引导。min.js
与async
一起运行很可能无法产生预期的结果。
目前,如果不耍花招,WordPress将不会推迟Javascript的使用,但这种情况很可能会改变。你可以依靠插件来实现这一点,或者在你的函数中添加一个简单的函数。php
如果JavaScript不是从src
文件中读取的,而是直接包含在defer
中,那么async
将被忽略。如果内联JavaScript需要等待DOM加载,请使用事件侦听器,或者确实放置
回答你的问题:对我来说,不清楚为什么Bootstrap没有在脚本中使用或记录延迟的使用。最后,他们甚至摆脱了对jQuery的依赖,所以我看不出为什么他们仍然这样记录它。