XDローダーでパフォーマンス・チューニング
「ビルドでパフォーマンス・チューニング(2)」でも軽く触れましたが、dojoにはXDローダーと呼ばれるコードをロードする機構が提供されており、デフォルト・ローダーに代えて使用することができます。使い方次第ではパフォーマンスの向上にも役立ちます。ここではXDローダーの仕組み、特徴および使い方を説明します。
XDローダーとは
ローダーは、dojo.require呼び出しの際、要求されたモジュールに対するコードをダウンロードし、そのコードを評価(実行)する役割を持つ機構です。dojoのデフォルト・ローダーは、dojo.require呼び出しの際、同期(sync)モードのXHR(XMLHttpRequest)呼び出しによりモジュールをロードし、評価を行います。
ただし、XHRにはセキュリティ上の理由からメインのHTMLファイルが置かれているサーバーとしか通信できないという制約(クロスドメイン制約)があります。従って、デフォルト・ローダーではメインのHTMLファイルが置かれているサーバーとは異なる外部サーバーからコードをロードすることができません。
これに対し、XDローダーはクロスドメイン・ローダー(Cross-domain Loader)とも呼ばれ、外部サーバーからのコードのロードを可能にするローダーです("XD"の名前は"Cross-domain"に由来します)。XHRにはクロスドメイン制約がありますが、<script>タグによるコードへのアクセスにはそのような制約がありません。そこで、XDローダーでは動的に<script>タグを生成し、<script>タグを使ってコードのロードを行います。XDローダーが内部的に利用している基本的な仕組みはリスト1のとおりです。
function loadScript(/*String*/url){ var element = document.createElement("script"); element.type = "text/javascript"; element.src = url; document.getElementsByTagName("head")[0].appendChild(element); }
AOL CDN
XDローダーを使えば外部サーバー上に置かれているdojoモジュールをロードできることを説明しましたが、実はローダー自体も含めたdojoシステム全体が外部サーバー上にあっても構いません。その場合は、自サイトにはメインのHTMLファイルのみがあればよいことになります。
米AOL社がCDN(コンテンツ・デリバリー・ネットワーク)サービスの一環で、XDローダーを使うクロスドメイン・モードでビルドされたdojoをホストしており、それを使えば自分のサーバーにはdojoシステムを一切置かずにHTMLファイルを用意するだけで手軽にdojoを利用することができます。リスト2にAOL CDNを利用したdojoアプリケーションの例を示します。
<html> <head> <style type="text/css"> @import "http://o.aolcdn.com/dojo/1.5/dojo/resources/dojo.css"; @import "http://o.aolcdn.com/dojo/1.5/dijit/themes/tundra/tundra.css"; </style> <script src="http://o.aolcdn.com/dojo/1.5/dojo/dojo.xd.js" djConfig="parseOnLoad: true"></script> <script language="JavaScript" type="text/javascript"> dojo.require("dojo.parser"); dojo.require("dijit.Calendar"); </script> </head> <body class="tundra"> <div dojoType="dijit.Calendar"></div> </body> </html>
AOLでは最新版以外にも過去にリリースされたバージョンのdojoのビルドもホストしています。また、圧縮のかかっているdojo.jsに加えて、圧縮されていないdojo.xd.js.uncompressed.jsも提供されています。詳しくはhttp://dev.aol.com/dojoを参照してください。