rcmdnk's blog
Last update

JavaScript 第6版

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

Sponsored Links

JavaScriptを非同期読み込み

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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要素がないものとかもあったので insertBeforescript要素の前に入れる、と言う変更を Google Analyticsなんかでも行って来たようです1

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

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

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

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

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

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

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

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

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

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

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

追記: 2014/12/24

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

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

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

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

追記ここまで

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!--
  <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>

追記

Google Analyticsについては通常の解析についてはきちんと情報が送られてましたが、 Googleウェブマスターツールの方でページの所有権の確認をする際にAnalyticsの コードを使っていると、 どうやら認識してくれなくなるみたいで通常の提供された通りのコードを使うように変更しました。

追記ここまで

上のYOUR-TRACKING-IDの部分だけ自分用に変えて貰えば使えます。

Octopressでは source/_includes/async.html の中にまとめて、これを source/_includes/head.html のなかで読み込んでいます。

Sponsored Links
  1. appendChild vs insertBefore High Performance Web Sites

  2. ちなみにasync指定するとき、asyncだけだったり、async='async'となってたり async=''となってたりしたものを見ましたが、 asyncはBooleanで、値を何入れても使った時点でasyncが真になる、とのこと。

    これを指定するときには属性名のまま入れるか空白にするか(もしくは何も指定しないか) するのが正しくてasync='true'とかは良くないと。 (async='false'としてもasyncは真になるのでその辺間違えない様にするため。)

    scriptタグのasync属性を使わずに非同期でJavaScriptを読み込む方法 さくらたんどっとびーず

  3. Script-injected “async scripts” considered harmful - igvita.com

  4. Can I use… Support tables for HTML5, CSS3, etc

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

  6. プログレッシブレンダリングでUXを向上させるJS非同期読み込みのベストプラクティス ゆっくりと…

Sponsored Links

« コード表示を大分GitHubっぽくしてみた はてなブックマークの数取得をhttpsでも出来るようにする »