WEBページが読み込まれる際、javascriptの読み込み中は他の読み込み処理がブロックされてしまう。つまり画像なんかは、javascriptが読み込まれると、読み込みが終わるまで画像が読み込まれない。
できればこの処理が並列で行われると良いのだが、現状はSafariやIE8でしか並列処理は実装されていないらしい。そのうち段々と実装されていくらしいけど。
とりえあず、全体的に実装されるまでは何らかの対策を講じようというわけで、その何らかの対策についてですけれど、javascriptを動的にロードすることで、並列処理を可能にする方法がある。
通常、javascriptファイルを読み込む場合は
<head>
<script type="text/javascript" src="js/sample.js"></script>
</head>headタグの中に↑こんな感じで記述するけれど、これ自体をjavascriptで行うことで、動的な読み込みが可能になる。
<script>
var js = document.createElement('script');
js.type = 'text/javascript';
js.src = 'js/sample.js';
var head = document.getElementsByTagName('head');
head[0].appendChild(js);
</script>同様にcssもこの方法で読み込むことも可能っぽい。
参照サイトはこちら。実際に並列処理している様子が分かるますです。
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
