2

最近のほとんどの Web サイトと同様に、私の個人 Web サイトには、「いいね」、「フォロー」、「共有」ボタンなどのソーシャル ネットワーク用のウィジェットが多数あります。

これらのウィジェットを埋め込むために、ソーシャル ネットワークの開発者サイトで提供されている JavaScript コードとdata-*、ボタンの「フック」に関連する属性を含む HTML5 マークアップを使用します。

現在、これらの API の「ローダー」関数は、Web ページの にある要素.jsを介してトリガーされる外部ファイルに配置されています。<SCRIPT><HEAD>

これらの「ローダー」関数は、関連するソーシャル ネットワークのサーバーから別のファイルを呼び出すことに気付きました。例として Facebook の JavaScript ローダー関数を使用します。

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

この関数は、Facebook のメイン API スクリプトを呼び出します。

connect.facebook.net/en_GB/all.js

また、同じ外部ファイルに Twitter と Google+ ローダー機能があります。

ただし、私は JavaScript とそれがキャッシュにどのように関係するかについての専門家とはほど遠いですが、外部スクリプトを使用するとキャッシュ関連の問題が発生するような気がします。これらのボタンは独自の考えを持っているようで、実際に読み込まれるかどうかは運次第です。Last-Modified:HTTPヘッダーを自動的に送信するApacheサーバーと関係があるのではないかと思っていました。

要するに、私が答えたい質問はこれです：

これらの API ローダーをトリガーする最も効率的でバグのない方法はどれですか? 外部スクリプトまたは埋め込みスクリプトを使用しますか?

つまり、API ローダー関数を埋め込むと、ボタンの読み込みとパフォーマンスが向上すると思いますか? それとも、コードが埋め込まれているか、外部ファイルにあるかは重要ですか?

4

0 に答える 0