您可以在HTML脚本标签上同时使用async和defer属性吗?


78

我想同时使用defer和加载以下JavaScript代码async

<script defer async src="/js/somescript.js"></script>

由于deferInternet Explorer 5.5+支持此功能,如您在CanIUse.com上看到的那样,如果异步不可用,我想优雅地退回到使用defer。我认为最好使用异步,但要在Internet Explorer 10之前不支持它。

因此,我的问题是上述代码是否为有效的HTML?如果没有,是否有可能使用JavaScript来创建这种情况,而当无法使用JavaScript时,它会优雅地回退到defer在脚本上async使用?

Answers:


124

根据规范:https : //www.w3.org/TR/2011/WD-html5-20110525/scripting-1.html#attr-script-async

即使指定了async属性,也可以指定defer属性,以使仅支持defer(而不支持async)的旧版Web浏览器退回到defer行为,而不是默认的同步阻止行为。


5
这是真的吗?:1.两者都async defer存在,现代浏览器运行为async;2.两者都async defer存在,旧的浏览器deferdefault行为代替行为运行
vikyd

不异步并推迟相反吗?异步将同时加载脚本,但是在完成加载后执行(暂停页面解析),但是Defer仅在所有加载和解析结束时执行?
利奥·穆勒

3
如果存在async属性,则脚本将在可用时立即异步执行。如果async属性不存在,而defer属性存在,则在页面解析完成后执行脚本。在这两种情况下,页面加载都不会被阻止。
戴夫

@LeoMuller这就是为什么它说“后备”。现代的偏好asyncdefer。对@vikyd是肯定的。如果您只是不关心遗留问题,那么您永远都不会希望两者都在同一方面<script>
КонстантинВан

18

问题是,您希望它做什么?如果同时存在异步延迟,则我希望脚本能够被延迟,并且仅在浏览器空闲时才在DOMContentLoaded之后执行,但是如果我正确读取规范,则如果设置了异步并加载了脚本,则延迟似乎被忽略了。异步,因此将在可用时立即执行,这很可能早于DOMContentLoaded并可能阻塞其他资源。

使用这些属性可以选择三种可能的模式。如果存在async属性,则脚本将在可用时立即异步执行。如果async属性不存在,而defer属性存在,则在页面解析完成后执行脚本。如果这两个属性都不存在,则在用户代理继续解析页面之前,将立即获取并执行脚本。

https://www.w3.org/TR/2011/WD-html5-20110525/scripting-1.html#attr-script-async


10

不幸的defer是,在async指定时被忽略,并且async始终具有更高的优先级。(至少在Chrome中。老实说,未在其他浏览器中进行过测试,但我认为结果将是相同的。)

我个人认为这是非常糟糕的,defer被忽视。让我们想象一下在加载页面内容之前,我们希望尽快进行一些JS初始化的情况。但是我们希望此脚本在需要它的其余脚本之前进行初始化。它应该排在defer队列的第一位。但是,不幸的是,这不起作用:

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

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

在此示例中,可以在加载jQuery之前加载并执行“ some_jquery_plugin.min.js”,该操作将失败。:(

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


9

是的,它是有效的HTML,它将按预期运行。

任何与W3C兼容的浏览器都将识别异步属性并正确处理脚本,而旧版IE版本将识别延迟属性。

由于这两个属性是布尔你不指定任何价值。


感谢@jandy的另一个出色回应!
Jasdeep Khalsa

11
“ ...将按预期工作。” 您希望它做什么呢?
Patrick Clancey
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.