4

我最近遇到了一个问题，当页面上有很多图像时，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);
4

2 回答 2

1

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

  1. 我们实施了图像大小调整方案，因此页面现在加载速度提高了大约 10 倍。
  2. 将 fb 元素附加到尽可能靠近顶部的位置。
  3. 为 Facebook 类实现了一个包装器来处理 FB 类的所有依赖类，以便它们可以被初始化而无需等待 FB。然后当 FB 对象准备好执行剩下的任何逻辑时调用它们。

我们的代码相当复杂，因此仅将 fb 元素放在顶部而没有额外的步骤只会由于时间问题而导致太多意想不到的问题。如果一切都必须等待 FB 对象被初始化，即使只有部分逻辑依赖于 FB，它也会对性能产生很大影响。

于 2013-07-08T20:36:10.333 回答
0

使用 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>
于 2013-06-18T05:49:15.097 回答