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

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网站的说法,"这个[异步属性]的主要好处是告诉浏览器后续脚本可以立即执行 - 他们不必等待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

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