JavaScriptライブラリーのCDN利用、フォールバック対応しました

かぶめもで使用しているJavaScriptライブラリーのCDN利用、フォールバック対応を行いました。

CDN

CDNとはContents Delivery Networkの略で、画像、動画、CSS、JavaScriptファイルなどを配信するためのサービスです。
同じファイルが保存されたサーバーを世界各地に配置して、ユーザーに近い位置にある最適なサーバーから配信を行うのと、あらかじめファイルをキャッシュしているためパフォーマンスが向上する可能性があります。

今回は下記のCDNを利用しています。

CDNのパフォーマンス比較

CDNを比較して「CDNのパフォーマンス比較（スプレッドシート）」にまとめました。
5回計測して平均を算出した結果です。

Microsoft、Googleの順にパフォーマンスが良いので、ライブラリーがあればここを優先的に利用したほうが良いと思います。

フォールバック対応

利用しているCDNに障害が発生したときもエラーになってしまわないように行った対応です。

かぶめもではJavaScriptをモジュール化、非同期ローディングが行えるRequireJSというJavaScriptライブラリーを使用していて、このライブラリーで対応することができました。

通常、RequireJSではロードしたいJavaScriptファイルをconfigへ文字列として定義するのですが、この定義を配列にして複数指定するだけでフォールバック対応ができてしまいます。

対応前

require.config({
  paths: {
    'jquery': 'lib/jquery/jquery-1.10.0.min',
    'jquerymobile': 'lib/jquery.mobile/jquery.mobile-1.3.1.min',
    'underscore': 'lib/underscore/underscore-1.4.4.min',
    'backbone': 'lib/backbone/backbone-1.0.0.min'
  }

対応後

require.config({
  paths: {
    'jquery': [
      '//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.0.min',
      '//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min',
      '//code.jquery.com/jquery-1.10.0.min',
      '//cdnjs.cloudflare.com/ajax/libs/jquery/1.10.0/jquery.min',
      'lib/jquery/jquery-1.10.0.min'
    ],
    'jquerymobile': [
      '//ajax.aspnetcdn.com/ajax/jquery.mobile/1.3.1/jquery.mobile-1.3.1.min',
      '//code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min',
      '//cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.3.1/jquery.mobile.min',
      'lib/jquery.mobile/jquery.mobile-1.3.1.min'
    ],
    'underscore': [
      '//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min',
      'lib/underscore/underscore-1.4.4.min'
    ],
    'backbone': [
      '//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min',
      'lib/backbone/backbone-1.0.0.min'
    ]
  }

配列の初めから優先的にロードが行われ、失敗したときは次がロード対象になるため、パフォーマンスが高い順に設定しています。