HTML5异步属性对脚本元素的好处究竟是什么？

Question

我对HTML5中脚本元素的新async属性有些疑惑，希望有人能给出明确答案。

浏览器具有并行连接功能，因此可以并行下载图像。但任何外部JavaScript都不会与其他外部JavaScript和图像并行下载。脚本阻止页面加载，直到它们被下载并执行。

要下载脚本而不阻止其余页面加载，最常见的技术是创建一个脚本元素，就像Google Analytics代码段一样：

var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.src = '...ga.js';
ga.async = true;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);

我不确定它是如何工作的 - 任

• 浏览器解析并呈现页面，然后一旦完成就会注意到DOM已更改，导致ga.js脚本被下载并执行

或

• 浏览器开始与其他资源并行下载javascript。

我认为是后者。

新的异步Google Analytics代码段在其创建的脚本元素中包含HTML5异步属性。这对页面阻塞问题没有帮助 - 这已经通过“脚本DOM元素”技术解决了。那么异步添加到图片中的是什么？根据w3schools的说法，“如果存在异步，脚本将与页面的其余部分异步执行（脚本将在页面继续解析时执行）”。

根据Steve Souders网站的说法，“这个[异步属性]的主要好处是告诉浏览器后续脚本可以立即执行 - 他们不必等待ga.js”。

async和Script DOM元素技术都解决了同样的问题吗？

Answer 1

会工作：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>$('body').append('Yey');</script>

无效：

<script async src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>$('body').append('Yey');</script>

Answer 2

异步属性只是更清晰（没有歧义非常简单）和更清晰（它将会或者已经是受尊重的HTML5规范的一部分）解决问题的方法。如果您的站点提供来自其他域（或CDN）的脚本，那么async属性会为您提供一点可靠性（允许用户至少读取静态内容），因为页面不会阻止脚本从缓慢（可能是向下） ）远程主机正在尝试加载。

Answer 3

来自html5rocks的Jake Archibald有一个很棒的article来解决这个话题。

Answer 4

根据https://www.html5rocks.com/en/tutorials/speed/script-loading/，如果动态添加<script>元素，则在DOMContentLoaded被触发之前可能不会被执行。也就是说，一些用户代理（例如MSIE 10）将等待DOM准备就绪，然后再运行动态添加的<script>元素。

我想谷歌希望让他们的分析代码在这些用户代理上运行得更快，因此他们需要添加async标志来告诉浏览器（例如MSIE 10）它可以开始执行脚本尽快。兼容HTML5的浏览器会像async一样执行，即使它未定义也是如此，因此仅添加async=true以提高非HTML5浏览器的性能。

Answer 5

将async属性设置为true可确保脚本与html呈现并行加载。这很重要，因为如果将脚本放在正文末尾并且在html中，我们使用的内容取决于javascript代码，因此它不会被加载并产生问题 可以使用defer，但defer只会暂停脚本的执行并呈现html

Answer 6

异步脚本在脚本加载后立即执行，因此不能保证执行顺序（最后包含的脚本可能在第一个脚本文件之前执行）

延迟脚本保证了它们在页面中出现的执行顺序。