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

Question

我想同时使用下面的JavaScript代码来加载defer和async:

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

由于deferInternet Explorer 5.5+支持,正如您在CanIUse.com上看到的,如果异步不可用,我希望优先使用延迟.Async我认为最好在可用时使用,但在Internet Explorer 10之前不支持.

我的问题是上面的代码是否有效HTML？如果没有,是否有可能使用JavaScript优雅地回退到不可用defer的脚本时创建这种情况async？

Answer 1

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

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

Answer 2

问题是,你期望它做什么？如果同时存在异步和延迟,我希望脚本延迟并且仅在浏览器空闲时在DOMContentLoaded之后执行,但是如果我正在读取规范,如果设置了异步并且加载了脚本,则看起来像defer被忽略异步,因此一旦可用就会执行,这可能在DOMContentLoaded之前执行,并可能阻止其他资源.

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

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

Answer 3

不幸的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>

在这个示例中，"some_jquery_plugin.min.js" 可以在加载 jQuery 之前加载和执行，但会失败。:(

所以有两种方法可以解决这个问题：要么只使用defer指令，要么将所有依赖的 javascript 文件合并到单个 JS 中。

Answer 4

不，您需要使用defer或async，但不能同时使用两者。有关更多信息，请参阅比较并根据您的需要使用。

defer属性：首先会下载脚本文件，然后等待html解析。html解析结束后，脚本将被执行。换句话说，它将保证所有脚本在 html 解析后都会执行。

当脚本用于 DOM 操作时，Defer 属性非常有用。意味着脚本将应用于文档 html。

async 属性：下载脚本文件并执行，无需等待 html 解析结束。换句话说，它不能保证所有脚本在 html 解析后都会执行。

当脚本不用于 DOM 操作时，异步属性非常有用。有时，您只需要脚本来进行服务器端操作或处理缓存或 cookie，而不需要 DOM 操作。意味着脚本与使用的 html 无关。

Answer 5

是的,它的有效HTML和它将按预期工作.

任何符合W3C标准的浏览器都将识别async属性并正确处理脚本,而旧版IE将识别defer属性.

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