添加 Facebook SDK 后加载时间更长

Question

我正在为我的网站添加 Facebook 社交按钮。您可以查看 website here.

我是 Facebook 的新手 API，但是在页脚中添加代码后，网站的加载时间变长了。

我通过 Google 做了一些研究，但我没有找到任何好的解决方案。我尝试添加开源 jQuery 社交插件，但效果不如我所愿。

我希望能够使用默认的 Facebook like/share 按钮（目前位于页脚）。

有什么方法可以减少我用 jQuery 添加的当前代码的加载时间吗？或者有没有其他方法可以保留默认的 Facebook like/share 按钮而不影响加载时间？

这是我在 <body> 标签后添加的当前 JavaScript 代码：

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'your-app-id',
      xfbml      : true,
      version    : 'v2.3'
    });
  };

  (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/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

这是页脚的 HTML 代码：

<li><div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-action="like" data-show-faces="false" data-share="true"></div></li>

提前致谢！

Answer 1

好的，既然我们解决了它，我们将 facebook 加载移动到页面加载之后发生，如下所示：

$(window).load( function(){ 
    (function(d, s, id){ 
         var js, fjs = d.getElementsByTagName(s)[0]; 
         if (d.getElementById(id)) {return;} 
         js = d.createElement(s); 
         js.id = id; 
         js.onload = function() { fbAsyncInit(); }
         js.src = "//connect.facebook.net/en_US/sdk.js"; 
         fjs.parentNode.insertBefore(js, fjs); 
     }(document, 'script', 'facebook-jssdk')); 
});

我所做的唯一更改是直接向脚本标记添加一个 onload，该标记在加载脚本时触发，因为它在主体加载之后加载，这会触发 facebook 的 api 基本上像正常一样启动.

Answer 2

您可以通过将 sdk url 更改为

来进一步改进已接受的答案

js.src = "//connect.facebook.net/en_US/sdk.js?xfbml=false"

如此处所述； https://developers.facebook.com/docs/javascript/advanced-setup/，这会将负载大小从 ~200kb 减少到 ~60kb

添加 Facebook SDK 后加载时间更长

Higher load time after adding Facebook SDK

html

jquery

facebook-javascript-sdk