3

ソーシャル共有リンクがページに読み込まれるまでに永遠に時間がかかります（まだサンドボックスにあるため、アクセスを提供できません）。3人の主要なプレーヤーすべてを見ると、彼らはすべてgetElementsByTagName、ページのすべての要素を使用して検索しています。

すでにすべてのソーシャルインスタンスにクラスを割り当てているので、適切なクラスの要素のみを調べるように関数を微調整することはできませんか？

速度が大幅に向上することはないかもしれませんが、可能な限り1ミリ秒ごとにパフォーマンスを絞り出したいと思います。

Facebook非同期JavaScript：

<script>
    (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#xfbml=1&appId=356176301083466";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
</script>

Twitter非同期JavaScript：

<script>
    !function(d,s,id){
        var js,fjs=d.getElementsByTagName(s)[0];
        if(!d.getElementById(id)){
            js=d.createElement(s);
            js.id=id;js.src="//platform.twitter.com/widgets.js";
            fjs.parentNode.insertBefore(js,fjs);
        }
    }(document,"script","twitter-wjs");
</script>

Google+非同期JavaScript：

<script type="text/javascript">
    (function() {
        var po = document.createElement('script'); 
        po.type = 'text/javascript'; 
        po.async = true;
        po.src = 'https://apis.google.com/js/plusone.js';
        var s = document.getElementsByTagName('script')[0]; 
        s.parentNode.insertBefore(po, s);
    })();
</script>`
4

2 に答える 2

2

ほぼ同じものに出くわしました。CSS-Tricksには、そのためのスニペットがあります。

(function(doc, script) {
var js, 
  fjs = doc.getElementsByTagName(script)[0],
  frag = doc.createDocumentFragment(),
  add = function(url, id) {
      if (doc.getElementById(id)) {return;}
      js = doc.createElement(script);
      js.src = url;
      id && (js.id = id);
      frag.appendChild( js );
  };
// Google+ button
add('http://apis.google.com/js/plusone.js');
// Facebook SDK
add('//connect.facebook.net/en_US/all.js#xfbml=1&appId=200103733347528', 'facebook-jssdk');
// Twitter SDK
add('//platform.twitter.com/widgets.js');
fjs.parentNode.insertBefore(frag, fjs);
}(document, 'script'));
于 2012-09-25T19:53:24.467 に答える
0

まず第一に、物事を本当に遅くするのはDOMトラバースではないかと思います（DOMトラバースは通常、最近のブラウザーでは高速です）。通常、ユーザーにとって「遅い」ように見えるのは、iframeソースへのHTTPリクエストです。

しかし、試してみたい場合は、Facebookでできることを次に示します（他の人が同様の機能を提供している場合は、ドキュメントを確認する必要があります）。

  • xfbml =1を指定せずにJSSDKを初期化すると、ドキュメント全体でXFBMLタグが自動的にレンダリングされないかどうかが確認されません。

  • その後、 FB.XFBML.parseを使用します。残念ながら、このメソッドは単一のDOM要素への参照のみをパラメーターとして受け入れるため、「セレクター」などを渡すことはできません。ただし、jQueryなどを使用してページ内の関連要素を取得し、ループ内の各要素でそのメソッドを呼び出すことができます。

しかし、最初に言ったように、それが物事を著しくスピードアップするとは思えません。

于 2012-09-23T14:13:10.433 に答える