JavaScriptをasyncで読み込むについて

ソーシャルボタンを自作に変更してから色々見直して、非同期でJavaScriptを読み込む部分に関して少し調べたのでメモ。

JavaScriptを非同期読み込み
例

JavaScriptを非同期読み込み

前にシェアボタンを非同期読み込みでまとめて設定でソーシャルボタンとかGoogle Analyticsとかを非同期で読み込み、さらにそれらをまとめる、みたいなことをしてました。

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

こんな感じ。 insertBeforeの部分で、最初のscript要素の前に

<script src='//platform.twitter.com/widgets.js'></script>

を追加しています。この際、ページの中ではinsertBeforeで追加してすぐに次に行くので、 //platform.twitter.com/widgets.js自体の読み込みは平行して非同期に行われる様になる、という仕組み。

これも、その昔、最初は

document.getElementsByTagName('head')[0].appendChild(domscript);

が使われていた様ですが、head要素がないものとかもあったので insertBeforeでscript要素の前に入れる、と言う変更を Google Analyticsなんかでも行って来たようです¹。

ただ、これらの方法はscript要素にasync属性が実装されてなかった時に、あるものを使って非同期実装を実現したものでした

async属性が使えるブラウザだと

<script src='//platform.twitter.com/widgets.js' ascync></script>

と、asyncを与えた形で直接書くだけで簡単に非同期にしてくれます ²。

さらに、このasync属性を使ったものに比べて上のinsertBeforeの方法は、 CSSOMをブロックしてしまう分遅くなってしまうようです³。

IE 9以前が対応してない、と言うことがあったりしたので asyncだけに頼るのは、ということも合ったみたいですが、 asyncを使うと大分すっきりするし、ほとんどのブラウザの最新版は対応してきているので ⁴ そろそろ使っても良いかな、と言う感じ。

RequireJS - SNSのウィジェットコードをまとめる - Qiita

単にasyncにする以外にも RequireJSを使ったり ⁵ すると非同期にしたいものと依存性を保ちたいものとかが整理出来たりして便利だったり、その手の物が他にもいくつかあったり⁶、非同期の方法も色々あったり⁷ しますが、取り敢えずは一番シンプルに出来るasync加えるだけが良いな、と。

ソーシャルボタンを自作に変更で特に時間がかかってたJavaScriptの読み込みの大半を無くす事が出来たのでそもそも余り関係が無くなってしまった点もありますが。。。

後、 Google タグマネージャ公式サイトとか ~~Yahoo!タグマネージャー: http://tagmanager.yahoo.co.jp/~~ とかが一時期気になってましたが、単にJavaScriptの管理、とか程度だと余り意味ないのかな?と、イマイチよく分かってないので今のところ使用する必要はないかな、と。

例

Google Analytics, LinkWithin, Disqusとその他のソーシャルボタンの読み込みは以下の様になります。

追記: 2014/12/24

Disqusは公式で配布されてるコードの様に、

<div id="disqus_thread"></div>

の要素より後にJavaScript部分を書かないと上手く表示されないことがあるのでここからは除外。

取り敢えず、source/_includes/post/disqus_thread.html の中に公式で配布されてるコードをほぼそのまま書く形で使用。

追記ここまで

<!--
  <script src="//www.google-analytics.com/analytics.js" async></script>
  <script>
  ga = function() {
    ga.q.push(arguments);
  };
  ga.q = [['create', '<YOUR-TRACKING-ID>', 'auto'], ['send', 'pageview']];
  ga.l = 1 * new Date();
  </script>
-->
  <script src="//www.linkwithin.com/widget.js" async></script>
  <script src='//b.st-hatena.com/js/bookmark_button.js' async></script>
  <script src='//platform.twitter.com/widgets.js' async></script>
  <script src='//apis.google.com/js/plusone.js' async></script>
  <script src='//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0' async></script>
  <script src='//widgets.getpocket.com/v1/j/btn.js?v=1' async></script>
  <script src='//platform.linkedin.com/in.js' async></script>
  <script src='//platform.stumbleupon.com/1/widgets.js' async></script>
  <script src='//assets.pinterest.com/js/pinit.js' async></script>