home/JavaScript/

JSとCSSの非同期読み込み

#navi(JavaScript)

JavaScriptとCSSを非同期で読み込む

JavaScriptやCSSは、ファイルの読み込みしている最中は、次の処理に移れません。
複数のJavaScriptファイルやCSSファイルを読み込むときに、Headタグに書く量が多くなると体感速度に大きく影響を与えてくるということです。

たとえば、
#code(html)

<script type="text/javascript" src="/js/library/prototype.js"></script>
<script type="text/javascript" src="/js/library/scriptaculous.js?load=builder,effects,controls"></script>

}}
というようにスクリプトが並んでいる場合、prototype.jsの読み込みが完了しないと次のscriptaclous.jsが読み込まれないということになります。

その間、画像などの読み込みは停止したままです。

しかし、DOMを用いてスクリプトやCSSを動的に読み込むと、体感速度がかなり向上します。

注意したいのは、読み込んだあとすぐに実行するタイプのJavaScript（外部から関数を呼び出すタイプでない場合のスクリプト）では、スクリプトが走らなくなる点です。

require.js
#code(javascript)

require = function(src){
	for (var i=0;src.length;i++){
		if(src.match(/\.(js|json)$/i)){
			var Tag = document.createElement('script');
			Tag.type = 'text/javascript';
			Tag.defer = 'defer';	// 読み込まれたときにすぐ実行す るための魔法
		}else if(src.match(/\.(css)$/i)){
			var Tag = document.createElement('link');
			Tag.type = 'text/css';
		}else{
			alert('Un supported format');
 		}
 		Tag.id = src[i];	// この行は不要。あくまでもデバッグ時に確認するため
		Tag.src  = src[i];
		document.getElementsByTagName('head').item(0).appendChild(Tag);
	}
};

}}
これで、読み込みたいスクリプトを
#highlight(javascript)

require('prototype.js','style.css');

}}
というように読み込みます。

なお、このテクニックは、IE7、FIreFox3未満のブラウザで効果があります。Safariや、最新のFireFox3やIE8ではあまり変化はありません。

応用として、たとえば季節に応じてサイトの雰囲気を変えたいとき、ここのstyle.cssを変化させるという使い方や、たとえばajax使用時のみ必要になるCSSを分離させて、非JavaScript環境では、読み込ませないようにするといった使い方が可能です。

特に、prototype.jsやjQueryのようなライブラリでは絶大な効果が期待できます。

もともと非同期読み込みが実装されているライブラリ

dojoや、YUIは、あまり効果が期待できません。たとえば、dojoでは、根幹のdojo.requireが同じような設計であるためです。