4

最近、ページにたくさんの画像があると、Facebook API の初期化に非常に長い時間がかかるという問題に遭遇しました。約 50MB の画像がある場合、これはより目立ちます。Facebook init は実際にはすべての前に最初に呼び出されますが、すべての画像が最初に読み込まれるまで待機しているようです。実際には、画像の 95% が非同期でページに追加されます。

誰かが同様の問題に遭遇しましたか? 現時点では、これがバグなのかブラウザの動作なのかはわかりませんが、Chrome と Safari でかなり一貫しています。また、初期化をブロックする可能性のある同期コードがどこにもないことを確認しました。

最初に Cookie をチェックして (または Cookie がない場合は Facebook を呼び出して)、ユーザーが既にログインしているかどうかを判断するために 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 の非同期バージョンを使用し、コメント ays がすべてのグラフ 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 に答える