引导 4 脚本最佳位置和脚本标签



一个旧主题,有很多讨论...我读了很多,但仍然不确定...

最佳的位置和最佳脚本标签(defer/async(可以找到Bootstrap-4 JS脚本以获得最佳性能?

在bootstrap文档中:"将以下s放在页面末尾,右

</body>

他们不使用任何脚本标签(defer/async(

我阅读了有关脚本标签的信息,有人写道,在身体关闭标签之前找到脚本就像使用"延期"标签找到标题。(除了旧浏览器(有人说:"如果脚本仍然处于最后,则性能会更好,因为以后将下载它们"

那么以下最佳练习是吗?

在车身关闭标签之前,先定位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>

或仅在没有"递送"标签??

的情况下执行Bootstrap文档

头部用于外部资源

在文档开始时,将所有依赖性都挡开是最佳实践。<head>是为此而制作的。由于当时没有加载DOM在页面加载中,这将使所有对DOM的引用失败。曾经有一个(黑暗的(时间,在延期之前,在那里获得建议以 </body>之后的脚本,但在 </html>之前将脚本放置。

但是,如果脚本资源确实已加载到标题中,则有一些更好的解决方案可以解决:

EventHandler

一个技巧是等待DOM加载带有DOMContentloaded事件处理程序。事件将在装载并准备就绪后尽快开火。这可以与async结合使用以加快页面加载的感知速度。

defer

由于很长一段时间,因此可以将JavaScript的执行推迟到加载页面后。script src=上的属性defer将按照参考顺序排队JavaScript。

异步

加载页面后,属性async不一定会执行脚本,它只是向浏览器 not 建议等待下载和执行JavaScript(block(,而是在并行执行使用页面渲染。无法保证负载顺序。

这对于JavaScript中的业务逻辑不直接取决于页面内容或其他资源,这将很好地工作。(https://javascript.info/script-async-defer(。包括bootstrap.min.jsasync很可能无法产生预期的结果。

WordPress

目前,但这很可能会发生很大的变化,而没有欺骗性的WordPress不会推迟JavaScript。您可以依靠插件来执行此操作或向您的功能添加一个简单的函数。php

内联JavaScript

如果未从src文件中读取JavaScript,而直接包含deferasync将被忽略。如果Inline JavaScript需要等待加载DOM,请使用事件侦听器,或者实际上将<script></script>放置在此之后又之前(如果代码在<html>之后,大多数浏览器都可以,则可以选择<html> -TAG在实践中可选(

bootstrap

回答您的问题:对我来说,尚不清楚自举为什么不使用或记录将defer用于脚本的使用。最后,他们甚至根据jQuery摆脱了,所以我看不出他们仍然这样记录的理由。

最终是最好的做法,您甚至可以在主体结束后写脚本:当浏览器到达脚本元素时,将HTML从顶部到按钮加载到按钮它下载(并等待(源,因此,如果将其放在末尾,则页面将加载,然后JS下载。请记住,需要JS来使视图动态化,因此在加载页面之前,您不需要以下功能,例如:单击Dropdwon并查看其内容。延期/异步只是达到相同结果的一种方法,但并不完全相同。

最新更新