什么是异步加载JavaScript代码

时间:2011-12-16 06:24:34

标签: javascript

我看过facebook javascript api提到异步加载sdk

// Load the SDK Asynchronously
  (function(d){
     var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/en_US/all.js";
     d.getElementsByTagName('head')[0].appendChild(js);
   }(document));

使用脚本标记直接加载脚本有什么不同,如下所示

<script src='as.js'></script>

以及上面显示的代码

1 个答案:

答案 0 :(得分:2)

<script>标记以保证顺序加载javascript同步。该脚本将在其后的其他内容(其他脚本或页面的其他元素)之前加载。

代码示例中的第一个选项异步加载它,相对于页面上的其他内容没有可预测的顺序。

异步加载的优点是页面waits中没有任何内容可以加载脚本,页面可以在脚本完成加载之前呈现。异步加载的缺点是,如果您监视该脚本的加载事件,或者它在加载和运行时调用您,或者您在某个工件上进行轮询,那么您只能知道它何时加载并可供使用。运行。

同步加载(使用<script>标签的优点是脚本以可预测的顺序加载,因此您可以先加载库脚本,然后加载使用这些库的脚本,并知道它们将以所需的顺序加载而不会特殊编码。在所有正文内容之前发生的脚本的同步加载会显着减慢其后面内容的呈现速度,因为脚本必须在加载和呈现页面的其余部分之前加载和执行。