为什么像 Facebook、Disqus、Google、Twitter 这样的服务告诉我们

Question

为什么 Facebook Like Button、Disqus 评论等服务告诉我们将此代码添加到我们的文档中

<div id="fb-root"></div>
<script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/it_IT/sdk.js#xfbml=1&version=v2.5";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
</script>

不是简单地添加这段代码是一回事吗？

<div id="fb-root"></div>
<script id="facebook-jssdk"src="//connect.facebook.net/it_IT/sdk.js#xfbml=1&version=v2.5"></script>

Answer 1

<script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0]; //line 1
      if (d.getElementById(id)) return;//line 2
      js = d.createElement(s); js.id = id;//line 3
      js.src = "//connect.facebook.net/it_IT/sdk.js#xfbml=1&version=v2.5"; //line 4
      fjs.parentNode.insertBefore(js, fjs);//line 5
    }(document, 'script', 'facebook-jssdk'));
</script>

只需观察第 1 行和第 5 行 - 它只是试图确保

1) facebook 的脚本应该是页面中的第一个脚本。

2) facebook 的脚本是延迟加载的。也就是说，document.ready() 事件不会等待此脚本加载。

Answer 2

当浏览器找到 <script src="..."> 标签时，它会阻止页面的进一步呈现，直到 javascript 已加载（或加载失败）。显然，这不是您想要的网站，因为外部 javascripts.

而卡住

Facebook 为您提供了一个代码，可以异步加载 javascript，而不会干扰您的页面加载。从 HTML5 开始，您还具有脚本标记的 "async" 属性，该属性可为您提供类似的行为。 <script src="..." async></script>

您可以在本文中找到有关 javascript 加载的更多信息：http://www.html5rocks.com/en/tutorials/speed/script-loading/

为什么像 Facebook、Disqus、Google、Twitter 这样的服务告诉我们

Why services like Facebook, Disqus, Google, Twitter tell us that

html

javascript

external