23

我对 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 脚本被下载并执行

或者

  • 浏览器开始与其他资源并行下载 javascript。

我认为是后者。

新的异步 Google Analytics 代码段在它创建的脚本元素中包含 HTML5 async 属性。这无助于页面阻塞问题——“Script DOM Element”技术已经解决了这个问题。那么 async 给图片添加了什么？根据 w3schools 的说法，“如果存在异步，则脚本将与页面的其余部分异步执行（脚本将在页面继续解析时执行）”。

根据 Steve Souders 的网站，“这个 [async 属性] 的主要好处是它告诉浏览器后续脚本可以立即执行——它们不必等待 ga.js”。

那么异步和 Script DOM 元素技术都解决了同一个问题吗？

4

6 回答 6

12

Will work:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>$('body').append('Yey');</script>

Will not work:

<script async src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>$('body').append('Yey');</script>
于 2013-07-17T12:08:45.100 回答
9

async 属性只是解决问题的一种更清晰（没有歧义，非常直接）和更清晰（它将或已经是受人尊敬的 HTML5 规范的一部分）的方法。如果您的站点提供来自另一个域（或 CDN）的脚本，那么 async 属性会为您提供一点可靠性（允许用户至少阅读静态内容），因为页面不会阻塞，而脚本来自慢速（可能会关闭） ) 远程主机正在尝试加载。

于 2013-07-17T12:02:46.917 回答
1

There was a great article from Jake Archibald on html5rocks which addresses this topic.

于 2013-07-17T12:09:20.113 回答
0

将 async 属性设置为 true 可确保脚本与 html 的呈现并行加载。这是必不可少的，因为如果脚本放置在正文的末尾并且在 html 中，我们使用的是依赖于 javascript 代码的东西，所以它不会t 被加载并创建问题 defer 可以使用，但 defer 只是暂停脚本的执行并呈现 html

于 2019-02-21T13:31:31.830 回答
0

这张图片解释了正常的脚本标签、异步和延迟信用转到 https://stackoverflow.com/users/1948260/prasanth-bendra

加载脚本后立即执行异步脚本，因此它不能保证执行顺序（您最后包含的脚本可能在第一个脚本文件之前执行）

延迟脚本保证它们出现在页面中的执行顺序。

于 2020-08-13T17:58:28.153 回答
0

根据https://www.html5rocks.com/en/tutorials/speed/script-loading/如果一个<script>元素是动态添加的，它可能不会被执行，直到DOMContentLoaded被触发。也就是说，一些用户代理（例如 MSIE 10）会等到 DOM 准备好后再运行动态添加的<script>元素。

我猜谷歌想让他们的分析代码在这些用户代理上运行得更快，因此他们需要添加async标志来告诉浏览器（例如 MSIE 10）可以尽快开始执行脚本。async即使没有定义HTML5 兼容浏览器，它也会像 true 一样执行，因此async=true添加它只是为了提高非 HTML5 浏览器的性能。

于 2017-07-06T10:16:29.927 回答