Question

这两个异步js加载方法有区别吗？

<div class="g-plusone"></div>
<script type="text/javascript">
(function(d, t) {
var g = d.createElement(t),
s = d.getElementsByTagName(t)[0];
g.async = true;
g.src = 'https://apis.google.com/js/plusone.js';
s.parentNode.insertBefore(g, s);
})(document, 'script');
</script>

<script type="text/javascript">
//<![CDATA[
(function() {
  document.write('<fb:like href="http://www.sandrophoto.com/' + location.pathname + '" send="true" width="360" show_faces="false" font=""></fb:like>');
  var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
  s.type = 'text/javascript';
  s.async = true;
  s.src = 'http://connect.facebook.net/en_US/all.js#xfbml=1';
  s1.parentNode.insertBefore(s, s1);
})();
//]]>
</script>

Answer 1

最明显的区别是document.write方法将代码准确地写入文档中的位置，其中另一种方法将内容放入指定的容器div中。

还存在一些其他差异，以及其他一些异步加载脚本的方法。

Steve Souders写了一篇关于这个主题的优秀文章，http://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/，我建议你阅读。

Answer 2

这两个看起来在概念上类似于加载。它们都创建一个新的脚本标记并将其添加到DOM，这允许两者异步加载，而不依赖于必须按所示顺序加载的其他脚本标记。这些实现中存在细微差别，但从加载的角度来看，它们在概念上看起来是相同的。

FB代码中的document.write（）会导致某些序列化与其他加载事件，并可能会稍微减慢它（取决于具体情况）。

哪种异步加载方法最好？文件写？

2 个答案: