Question

我最近遇到了一个问题，当页面上有很多图像时，Facebook API需要很长时间才能初始化。当有大约50MB的图像时，我会更加明显。 Facebook init实际上在所有内容之前被调用，但它似乎仍然要等到所有图像首先被加载。 95％的图像实际上是异步附加到页面上的。

有没有人遇到过类似的问题？此时，我不确定这是一个错误或浏览器的行为方式，但它在Chrome和Safari中非常一致。我还确保在任何可能阻止初始化的地方都没有同步代码。

由于我们依靠Facebook来确定用户是否已经通过首先检查cookie登录（或者如果没有cookie则调用Facebook），这会对用户的体验产生相当大的影响。我们也使用Facebook登录作为主要方式，因此用户在初始化API之前无法登录。

通过较慢的互联网连接，这很容易重现。如果您想查看实际行为，可以转到https://www.toovia.com。单击右上角的登录，您将看到Face Pile不存在，即API仍在初始化。

以下是我正在初始化API的方法。它几乎都是从Facebook文档中复制过来的。

var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);

Answer 1

仅供参考。我们最终通过3个步骤解决了这个问题。

我们实施了图片大小调整方案，以便现在加载页面快了10倍。
将fb元素追加到顶部附近可能。
实现了Facebook类的包装器来处理所有问题 FB类的依赖类，以便它们可以初始化无需等待FB。然后在FB对象时调用它们准备好执行剩下的任何逻辑。

我们的代码相当复杂，因此只需将fb元素放在顶部而不需要额外的步骤，就会因时序而导致太多的意外问题。如果必须等待FB对象初始化，即使只有逻辑的子集依赖于FB，它也会对性能产生很大的影响。

Answer 2

使用sdk init的异步版本，并在其中执行所有api调用，其中注释将在此处进行所有图形api调用。

直到sdk完全加载后才会进行调用。

参考https://developers.facebook.com/docs/javascript/gettingstarted/#asynchronous

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    // init the FB JS SDK
    FB.init({
      appId      : 'YOUR_APP_ID',                        // App ID from the app dashboard
      channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel file for x-domain comms
      status     : true,                                 // Check Facebook Login status
      xfbml      : true                                  // Look for social plugins on the page
    });
// do all function calls or class calls here as well, fb related.
    // make all graph api calls here
    // Additional initialization code such as adding Event Listeners goes here
  };

  // Load the SDK asynchronously
  (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/all.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

当页面上有大量图像时，Facebook Javascript API需要很长时间才能初始化

2 个答案: