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

公開日: : 最終更新日:2014/06/27 JavaScript, jQuery ,

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

 

CDN

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

 

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

 

CDNのパフォーマンス比較

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

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

 

フォールバック対応

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

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

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

 

対応前

 

対応後

 

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

 

ad

関連記事

By: Bex Walton

閏年(うるうどし)を調べる関数

Wikipediaの情報を参考に閏年を判定する関数を作成してみました。   仕様 西

記事を読む

By: Gabriela Pinto

WebRTCのgetUserMediaでビデオ出力する方法

チャットワークのビデオ会議機能で使われている技術ということで調べてみました。 WebRTC(Web

記事を読む

By: Chris Lott

FullCalendarにGoogleカレンダーを読み込む方法

FullCalendarにGoogleカレンダーのイベントを読み込んでみました。   g

記事を読む

pics 006

JavaScriptからASP.NETのWebMethod(PageMethod)を呼び出す方法

ジェネリックハンドラー(.ashx)やWCFサービス(.svc)を試してみましたが、PageMeth

記事を読む

Business Calendar & Schedule

FullCalendarの日本語化やオプションいろいろ

Google Calendarライクなカレンダーと噂のFullCalendarの使い勝手が知りたくて

記事を読む

By: Edwart Visser

jQuery UI のダイアログで jQuery Validation を使う方法

リアルタイムフォームバリデーションが行えるjQuery Validationを使ってみました。 発生

記事を読む

8937324062_e417d7866f_o

台湾の女子学生制服マップの写真を並べてみた

ロケットニュース24で絶賛されている台湾の女子学生の写真をjQuery Masonryプラグインを使

記事を読む

ad

ad

By: cea +
24時を超えた時刻を入力できるテキストフィールドを作ってみた

時刻を入力するためのフィールドをVaadinのTextFieldを継承

By: GotCredit
Vaadin+Spring Bootでログイン画面を作成

Spring BootをベースにVaadinでログイン画面を作ってみま

lombok cant find ide
Spring Tool SuiteへLombokをインストールする方法

下記のURLから"lombok.jar"をダウンロードします。 ht

Spring Tool Suite
Spring Tool Suiteのインストールと日本語化

 Spring Tool Suiteのインストール 下記のURLから

spotlight -> terminal
ターミナルの起動方法

Spotlightから起動する "control"キーを押しな

→もっと見る

PAGE TOP ↑