SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

「Dojo道場」~実用アプリ構築のためのベストプラクティス

Dojo道場 ~ 第4回「ビルドでパフォーマンス・チューニング(3)」
XDローダー

「Dojo道場」~実用アプリ構築のためのベストプラクティス


  • X ポスト
  • このエントリーをはてなブックマークに追加

XDローダーとパフォーマンス

 デフォルト・ローダーとXDローダーとでは、コードがロードされる際の挙動に一つ大きな違いがあります。デフォルト・ローダーは同期モードでロードするため、dojo.require呼び出しから戻ると、コードのロードおよび評価が確実に完了しています。一方、<script>タグを使うXDローダーの場合は、コードのロードは非同期で行われるため、dojo.require呼び出しから戻ってもロードが完了している保証はありません(むしろ、確実に完了していません)。

 コードのロードが非同期で行われるということは、次の二つのことも意味します。

  1. コードのロードはバックグラウンドで行われるため、ロード中にアプリケーションを一時フリーズさせるようなことがない。
  2. 複数のネットワーク接続を使って、同時並行的により効率良くコードのロードを行うことができる。

バックグラウンドでのロード

 前述の1.は特にコードの遅延読み込みを行う際に効果を発揮します。同期モードで遅延読み込みを行うと、ユーザーにアプリケーションの操作中に一時的に画面がフリーズすると感じさせてしまう可能性があります。ブラウザがフリーズしている間は、ユーザーは一切の操作ができませんし、画面の再描画さえ行われません。その点、非同期モードの性質を活用してアプリケーションをうまくデザインすれば、ロードするコード量は同じでも、応答性やユーザーの体感を向上させることができます。アイドル中にバックグラウンドで次の操作で必要になりそうなコードをあらかじめロードするといった実装も可能でしょう。

同時並行ロード

 前述の2.は複数のJavaScriptファイルを同時並行的にロードすることにより、一つずつ順にロードするよりも全体として短時間でロードを完了できる可能性があることを意味します。

 図1および図2はあるアプリケーションをそれぞれデフォルト・ローダーおよびXDローダーでロードした場合のパフォーマンスの比較です。縦軸の一つひとつはロードされるファイル、横軸は時間、グラフのバーはロード開始から終了までを表します。

 図1を見ると、デフォルト・ローダーでは一つのファイルのロードが終わってから次のファイルのロードがはじまり、一つずつ順にロードしていることが分かります(※1)。

 一方、図2を見ると、XDローダーはいくつかのJavaScriptファイルを同時並行的にロードしている様子が分かります(※2)。結果的に図1のケースよりも短時間で全体の処理が完了しています。同時に最大何本の接続を利用するかはブラウザやサーバーの種類や設定によっても異なりますが、一般的に一つずつ取得するよりは複数本の接続を利用して並行して取得する方がより短時間で完了することが期待できます。

図1. デフォルト・ローダーによるコードのロードの例
デフォルト・ローダーによるコードのロードの例
図2. XDローダーによるコードのロードの例
XDローダーによるコードのロードの例
※1

 一部同時並行的にロードされているように見えるのはスタイルシート・ファイル(*.css)です。

※2

 ロードは同時並行的に処理されるため、ロードの完了の順序は不定で、予測することはできません。しかし、コードの評価はしかるべき順序で行う必要があるため、デフォルト・ローダーの場合のようにロード完了後ただちにコードの評価を行うわけにはいきません。実はロード完了後に評価を一時保留にすることを可能にするために後述のxdomainビルドはソースコードに巧妙な変換を施しています。XDローダーはすべてのモジュールのロードが完了した後に、ロードした全モジュールの依存関係ツリーを解析し、ツリーの末端から順に評価を行います。

XDローダーによるパフォーマンス改善

 以上のように、XDローダーはその名前からクロスドメイン対策の側面がクローズアップされることが多いのですが、実はパフォーマンス・チューニングのテクニックとしても注目したい技術です。自ドメインで閉じていて、クロスドメイン対策の必要がないプロジェクトであっても、パフォーマンスの観点でXDローダーの採用を検討してみる価値があると言えます。

次のページ
XDローダーの使い方

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
「Dojo道場」~実用アプリ構築のためのベストプラクティス連載記事一覧

もっと読む

この記事の著者

神山 淑朗(カミヤマ ヨシロウ)

日本アイ・ビー・エム株式会社 ソフトウェア開発研究所に勤務。現在は主にdojoベースのwebアプリケーションの研究開発に従事。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/5695 2012/01/30 11:50

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング