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 */

我的问题是，“脚本将异步执行”是什么意思？这个脚本是否会在与页面中其他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>

结果：“bar”

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框架将在此之后的某个时刻执行您的脚本。

Answer 3

异步下载，而不是异步执行。此外，它不一定在下载完成时执行。

Answer 4

  (function(doc, script) {
    var js, 
        fjs = doc.getElementsByTagName(script)[0],
        add = function(url, id) {
            if (doc.getElementById(id)) {return;}
            js = doc.createElement(script);
            js.src = url;
            id && (js.id = id);
            fjs.parentNode.insertBefore(js, fjs);
        };

    // Google Analytics
    add(('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js', 'ga');
    // Google+ button
    add('https://apis.google.com/js/plusone.js');
    // Facebook SDK
    add('//connect.facebook.net/en_US/all.js', 'facebook-jssdk');
    // Twitter SDK
    add('//platform.twitter.com/widgets.js', 'twitter-wjs');
}(document, 'script'));

来源：https://css-tricks.com/thinking-async/

异步javascript加载/执行

4 个答案: