关于javascript:你能在HTML脚本标签上同时使用async和defer属性吗?

Can you use both the async and defer attributes on a HTML script tag?

我想使用deferasync加载以下javascript代码:


是的,它是有效的HTML,可以像预期的那样工作。

任何与W3C兼容的浏览器都将识别async属性并正确处理脚本,而传统的IE版本将识别defer属性。

因为这两个属性都是布尔值,所以您不必分配任何值。


不幸的是,当指定async时,defer被忽略,而async总是具有更高的优先级。(至少铬合金。老实说,没有在其他浏览器中测试过,但我认为结果是一样的。)

我个人认为,忽视defer是非常糟糕的。让我们想象一下这样的情况:即使在加载页面内容之前,我们希望尽快初始化一些JS。但是我们希望这个脚本在其他需要它的脚本之前初始化。它应该是defer队列中的第一个。但不幸的是,这不会奏效:

1
2
3
4
5
<!-- we want"jQuery" ASAP and still in"defer" queue. But defer is ignored. -->
<script src="jquery.min.js" async defer>

<!-- this doesn't blocks the content and can wait the full page load, but requires"jQuery" -->
<script src="some_jquery_plugin.min.js" defer>

在此示例中,可以在加载jquery之前加载并执行"some-jquery-plugin.min.js",并且将失败。:(

因此,有两种方法可以解决这个问题:要么只使用defer指令,要么将所有依赖的javascript文件合并为单个JS。