logo标签列表

HTML中<script>标签的async="async"属性是什么意思？

javascripthtml
52

async = "async"是HTML中<script>标签的属性，它是什么意思？

<script async="async" src="...."></script>

可以在这里查看示例

6个回答
58
如果在外部脚本（带有src属性）上设置了async属性，则支持该属性的浏览器将在后台下载该脚本，而不会阻止页面上其余内容的加载。该脚本将在下载完成后立即执行。

http://dev.w3.org/html5/spec/Overview.html#attr-script-async

如我在评论中提到的那样，设置async=true、async=false或async=任何值都意味着相同的事情。它们都启用了异步行为。唯一使脚本非异步的方法是完全省略该属性。

http://dev.w3.org/html5/spec/Overview.html#boolean-attributes

4
如果我记得把 JavaScript 设置为“async”，那么我就不需要把它放在页面底部了，对吗？ - satoru
1
第一个链接的锚点不再起作用，文档中也没有提到async。 - agentofuser
21

在XHTML中，需要将属性及其值标注为属性，而HTML则不需要。我喜欢这个原则的一致性，因此我总是使用以下形式：

async="async"

这样我就可以将我的文档作为application/xhtml+xml提供服务。

如果您认为将文档作为text/html提供足够好，那么您也可以使用：

async
1
你的回答很有用（关于文档/媒体类型），但没有回答我实际的问题：属性“async”是做什么用的？ - Itay Moav -Malimovka
很抱歉我没有谈论到主题。 - JPA
异步（Async）是一个新的HTML5属性，用于脚本元素。它使浏览器在发现脚本标签时继续解析页面的其余部分，而不是先解析脚本，然后再继续解析页面。我找到了一个有趣的教程： http://www.youtube.com/watch?v=KHSeGURldw8 - JPA
4

HTML WHATWG specification 包含以下解释：

对于经典脚本，如果存在async属性，则经典脚本将在解析过程中并行获取并在可用时立即执行（可能在解析完成之前）。如果未出现async属性但出现了defer属性，则经典脚本将在并行获取后在页面解析完成时执行。如果两个属性都不存在，则脚本将立即获取和执行，阻止解析直到两者都完成。
对于模块脚本，如果存在async属性，则模块脚本及其所有依赖项将在解析过程中并行获取，并在可用时立即执行（可能在解析完成之前）。否则，模块脚本及其依赖项将在并行获取后在页面解析完成时执行。（defer属性对模块脚本没有影响。）
这些内容总结在以下示意图中：

enter image description here

这些属性的确切处理细节，由于历史原因，有些复杂，涉及HTML的许多方面。因此，实现要求必须散布在规范中。所描述的算法是核心处理，但这些算法引用并被引用于HTML、外部内容和XML中的脚本开始和结束标签的解析规则、document.write()方法的处理等脚本处理规则。即使指定了async属性，也可以指定defer属性，以使仅支持defer（而不支持async）的传统Web浏览器回退到defer行为，而不是默认的阻止行为。
4
它的意思是：
  1. 异步下载外部脚本（或并行下载），而不会阻止 HTML 解析。
  2. 一旦下载完成，该脚本将会立即执行，阻止 HTML 解析。


这里有一个很好的插图。

注意：此属性仅适用于外部脚本（具有 src 属性的脚本），而不适用于内联脚本。

2
1

我只需要足够的异步。

你可以尝试两种方法，然后测量页面速度的差异。例如crictime使用单一物质实现此功能。

不，这并不是所有情况下都成立的。 - JPA
在XHTML的情况下，如果作为application/xml+xhtml呈现，则当您注意到这样的属性时，它会导致页面冻结。 - JPA
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接