Web事業部実績紹介_Webサービス
Web事業部実績紹介_Webサービス
2010.03.17

ブロック回避でページの読み込み速度を上げる

まっちー

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もこの方法で読み込むことも可能っぽい。

参照サイトはこちら。実際に並列処理している様子が分かるますです。