我对 HTML5 中 script 元素的新 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 脚本被下载并执行
or
- 浏览器开始与其他资源并行下载 JavaScript。
我认为是后者。
新的异步 Google Analytics 代码段在其创建的脚本元素中包含 HTML5 异步属性。这无助于解决页面阻塞问题——“脚本 DOM 元素”技术已经解决了这个问题。那么 async 给图片添加了什么？根据 w3schools 的说法，“如果存在异步，则脚本将与页面的其余部分异步执行（脚本将在页面继续解析时执行）”。
根据 Steve Souders 网站的说法，“这个 [异步属性] 的主要好处是它告诉浏览器可以立即执行后续脚本 - 他们不必等待 ga.js”。
那么 async 和 Script DOM 元素技术都解决同样的问题吗？
将工作：
<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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
