javascript - 脚本元素上的 HTML5 async 属性到底有什么好处？

Question

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

浏览器支持并行连接，因此图像将并行下载。但是任何外部 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 网站的说法，“这个 [async 属性] 的主要好处是它告诉浏览器可以立即执行后续脚本——它们不必等待 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>