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

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

提问by Jasdeep Khalsa

I would like to load in the following JavaScript code using both deferand async:

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

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

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

Since deferis supported by Internet Explorer 5.5+, as you can see at CanIUse.com, I would like to gracefully fallback to using defer if async is not available. Async I think is better to use when it is available but its not supported until Internet Explorer 10.

由于deferInternet Explorer 5.5+ 支持，正如您在CanIUse.com 上看到的那样，如果异步不可用，我想优雅地回退到使用 defer。异步我认为最好在它可用时使用，但直到 Internet Explorer 10 才支持它。

My question is therefore is the above code valid HTML? If not, is it possible to create this situation using JavaScript of gracefully falling back to using deferon a script when asyncis not available?

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

回答by dave

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

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

The defer attribute may be specified even if the async attribute is specified, to cause legacy Web browsers that only support defer (and not async) to fall back to the defer behavior instead of the synchronous blocking behavior that is the default.

即使指定了 async 属性，也可以指定 defer 属性，以导致仅支持 defer（而非异步）的旧版 Web 浏览器回退到 defer 行为，而不是默认的同步阻塞行为。

回答by Patrick Clancey

The question is, what would you expect it to do? If both asyncand deferare present I would expect the script to be deferred and only executed after DOMContentLoaded when the browser is idle, but if I'm reading the specification right it looks like deferis ignored if asyncis set and the script is loaded asynchronously, so will execute as soon as it's available, which may well be before DOMContentLoaded and may block other resources.

问题是，你希望它做什么？如果async和defer都存在，我希望脚本被延迟，并且只在浏览器空闲时在 DOMContentLoaded 之后执行，但是如果我正确阅读规范，如果设置了async并且脚本被加载，则看起来defer被忽略异步，因此将在可用时立即执行，这很可能在 DOMContentLoaded 之前并可能阻塞其他资源。

There are three possible modes that can be selected using these attributes. If the async attribute is present, then the script will be executed asynchronously, as soon as it is available. If the async attribute is not present but the defer attribute is present, then the script is executed when the page has finished parsing. If neither attribute is present, then the script is fetched and executed immediately, before the user agent continues parsing the page.

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

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

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

回答by Aleksey Kuznetsov

Unfortunately deferis ignored when asyncspecified, and asyncalways have higher priority. (At least in Chrome. Honestly, did not tested in other browsers, but I think that result will be the same.)

不幸的defer是，在async指定时会被忽略，并且async总是具有更高的优先级。（至少在 Chrome 中。老实说，没有在其他浏览器中测试过，但我认为结果是一样的。）

And personally I think that it's very bad that deferis ignored. Let's imagine situation when we would like to have some JS initialized ASAP, even before loading of the page content. But we want this script initialized BEFORE the rest of scripts which requires it. It should be first in deferqueue. But, unfortunately, this will not work:

我个人认为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>

In this sample the "some_jquery_plugin.min.js" can be loaded and executed before the load of jQuery, and will fail. :(

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

So there is 2 ways to solve the problem: either use only deferdirective, or merge all depending javascript files into single JS.

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

回答by jAndy

Yes, its valid HTML and it will work like expected.

是的，它是有效的 HTML，它会按预期工作。

Any W3C compliant browser will recognize the asyncattribute and treat the script properly, whereas legacy IEversions will recognize the deferattribute.

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

Since both attributes are booleanyou don't have toassign any value.

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