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