异步javascript加载/执行

Question

在这篇文章中,异步.js文件加载语法,有人说,"如果存在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 */

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

谢谢.

Answer 1

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

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

例:

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是否已加载.

但是,没有线程可以担心.一个脚本在另一个脚本之后执行,但从不同时执行.这只是执行的顺序变得不可预测.

Answer 2

它不会在不同的线程上执行.在这种情况下,您不必担心线程同步.

稍后,在您当前的调用堆栈展开后,myfile.js的下载将完成.浏览器和js框架将在此之后的某个时刻执行您的脚本.