脚本元素上的HTML5异步属性到底有什么好处？
我对HTML5中脚本元素的新异步属性有些困惑，我希望有人能给出一个明确的答案。
浏览器能够并行连接，因此图像将并行下载。但是没有与其它外部javascript和图像并行地下载任何外部javascript。在下载并执行脚本之前，脚本会阻止页面加载。
要在不阻塞页面加载的情况下下载脚本，最常见的技术是创建脚本元素，就像Google Analytics snippet所做的那样：
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异步属性。这对页面阻塞问题没有帮助-- "Script DOM Element“技术已经解决了这个问题。那么异步给这幅图增加了什么呢？根据w3schools的说法，“如果存在异步，脚本将与页面的其余部分异步执行(脚本将在页面继续解析的同时执行)”。
根据Steve Souders site的说法，“这种异步属性的主要好处是它告诉浏览器可以立即执行后续脚本--它们不必等待ga.js”。
那么异步和脚本DOM元素技术是否都能解决相同的问题呢？
回答 6
Stack Overflow用户
发布于 2013-07-17 20:08:45
将会工作：
<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>Stack Overflow用户
发布于 2013-07-17 20:02:47
异步属性只是一种更清晰(没有歧义，非常直接)和干净(它将会，或者已经是受人尊敬的HTML5规范的一部分)来解决问题的方法。如果您的站点提供来自另一个域(或CDN)的脚本，则async属性为您提供了一点可靠性(至少允许用户读取静态内容)，因为当来自速度较慢(可能已关闭)的远程主机的脚本试图加载时，页面不会阻塞。
Stack Overflow用户
发布于 2013-07-17 20:09:20
杰克·阿奇博尔德在html5rocks上发表了一篇很棒的article，讨论了这个话题。
https://stackoverflow.com/questions/17699135
复制相似问题