javascript - 异步 javascript 加载/执行

Question

在这篇文章中，asynchronous .js file loading syntax ，有人说，“如果存在 async 属性，那么脚本将异步执行，只要它可用。”

(function() {
  var d=document,
  h=d.getElementsByTagName('head')[0],
  s=d.createElement('script');
  s.type='text/javascript';
  s.async=true;
  s.src='/js/myfile.js';
  h.appendChild(s);
}()); /* note ending parenthesis and curly brace */

我的问题是，“脚本将异步执行”是什么意思？此脚本是否会在与页面中其他 javascript 不同的线程中执行？如果是，我们是否应该担心两个线程中的同步问题？

谢谢。

Answer 1

通常，当您将外部脚本添加到 HTML 文档时，需要先下载并执行该脚本，然后才能在页面上执行任何其他操作。换句话说，脚本 block 。如果要下载多个脚本，这可能会花费很多时间。

但是当您异步加载脚本时，它不会阻塞。在下载异步脚本时，可以加载页面的其余部分并执行其他脚本。这使页面加载速度更快，但这也意味着您无法确定异步脚本何时执行。所以你不能只是开始使用异步脚本中的函数和对象。您必须等待并检查异步脚本是否加载。

例子:

script1.js

var foo = "bar";

script2.js

alert(foo);

doc1.html

<script type="text/javascript" src="script1.js"></script>
<script type="text/javascript" src="script2.js"></script>

结果:“酒吧”

doc2.html

<script type="text/javascript" src="script1.js" async="true"></script>
<script type="text/javascript" src="script2.js"></script>

结果:“bar”或未定义，取决于 script1.js 是否已加载。

不过，没有线程可担心。一个脚本一个接一个地执行，但绝不会同时执行。只是执行顺序变得不可预测。