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

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

本文关键字：服务 我们 这一点 Facebook Disqus Google Twitter 为什么      更新时间：2023-09-26

为什么像Facebook这样的服务喜欢按钮，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>

当浏览器找到 <script src="..."> 标记时，它会阻止页面的进一步渲染，直到 javascript 加载（或加载失败）。显然，这不是您想要的网站，由于外部JavaScript而卡住。

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

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

<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()事件不会等待加载此脚本。

相关文章：