11

私は、(iframe ではなく) インライン fbml 手法を使用して埋め込まれた、Facebook の「いいね」ボタンを多数含むページを持っています。十分に単純です。ページは正常にレンダリングされ、すべてが期待どおりに機能します。

でも...

名前空間の宣言をドキュメントに追加するとxmlns:fb="http://www.facebook.com/2008/fbml"、IE で最初のページのレンダリング時間が大幅に低下することに気付きました。(ie8 開発者ツールを使用して) 詳しく調べると、ページが最初に読み込まれた後の短い期間、DOM 全体が何度も何度も「リフレッシュ」または「リフロー」しているように見えることがわかります。さらに調べてみると、リフローの数は明らか<fb:xxx>にドキュメント内の要素の数に比例していることがわかります。

xmlns 宣言を削除すると、問題が解消されます。

誰もこれを以前に経験しましたか？

アップデート：

さらに掘り下げると、いくつかの詳細が明らかになりました...実際、問題は、インラインスクリプトの再実行など、IEがページをリフローしていることです。原因は、xmlns 自体が含まれていることではなく、ボタン自体の xfbml レンダリングにあるようです。xmlns を追加すると、単に xfbml レンダリングがトリガーされ、xmlns がないと、ボタンは最初からレンダリングされませんでした。次のマークアップは、この問題を示しています。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" xmlns:fb="http://www.facebook.com/2008/fbml">
  <head>  
    <script type="text/javascript">
      alert('some inline js');
    </script>
  </head>
  <body>
    <div id="fb-root"></div>

    <div>
      <fb:like href="http://example.local/1" layout="button_count" show_faces="false" width="80" action="like" font="arial" colorscheme="light"></fb:like>
      <fb:like href="http://example.local/2" layout="button_count" show_faces="false" width="80" action="like" font="arial" colorscheme="light"></fb:like>
      <fb:like href="http://example.local/3" layout="button_count" show_faces="false" width="80" action="like" font="arial" colorscheme="light"></fb:like>
    </div>

    <script src="http://connect.facebook.net/en_US/all.js#xfbml=1" type="text/javascript"></script>

  </body>
</html>

つまり、上記の例を実行すると、3 つのアラートが生成されますが、表示されるのは 1 つだけです。

4

1 に答える 1

5

Facebookバグ 9777が発生しているようです。これは、新しい all.js の開始時から存在しています。それを修正する試みがいくつかあったと思いますが、実際にはうまくいきませんでした。先週、優先順位が一段階上がったようです。すぐに修正されるかどうか見てみましょう。

いずれにせよ、表示されている問題は DOM ツリーの変更が原因ではありません。実際、トリガーされるJavaScriptはあなたのページにもありません...あなたの「トップ」ページです。

スクリプトは、fb:like要素の代わりに facebook スクリプトによって作成された iframe にあります。

"some inline js"の代わりに、次のように表示される場合alert:

alert("This: " + window.location.href + "\nTop: " + window.top.location.href);

どこから来ているかがわかります。「This」 URL には、URL に追加された多数のパラメーターが表示さfb_xd_fragmentれます。基本的に、facebook スクリプトは各 iframe ウィンドウを表示中の URL にリダイレクトし、スクリプトを開始します。

http://developers.facebook.com/docs/reference/javascript/FB.init/で、回避策としてカスタム チャネル URL ( ) init パラメータについて説明しchannelURLていますが、多くの人にとってはうまくいかないようです。また、多くの人が channelURL として提供するパスでリクエストのフラッドを受けています。

 

ふと思ったのですが… iframeメソッドを使って「いいね」ボタンを読み込んでみましたか？その方が早かったですか？

それ以外の場合は、 all.jsスクリプトの遅延読み込みを試すことができます ...

(function() {
  var e = document.createElement('script');
  e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js#xfbml=1';
  e.async = true;
  document.getElementById('fb-root').appendChild(e);
}());
于 2011-05-16T00:36:38.630 に答える