ページの処理中に<script>タグが存在した場合、そのコードを読み込み実行している間はページのレンダリング処理が停止してしまう。このJavaScriptの読み込み&実行によるパフォーマンスへの影響を最小限に抑える方法。
・スクリプトはbody内の一番下に置く。</body>タグの直前。
・スクリプトをグループ化する。大量のjsファイルは1ファイルにまとめるなど可能な限りファイル数を減らしてhttpアクセスを最小限にする。(ビルド用ツールを利用するなど)
・ノンブロッキング(非同期)なスクリプトの読み込み
ノンブロッキング(非同期)なスクリプトの読み込み例を以下に記す。
1.defer属性を利用(IEとFirefox3.5以上でのみ対応)
2.<script>要素を動的に生成し、コードのダウンロードと実行を行う。
3.XMLHttpRequestによるスクリプトの挿入。(クロスドメインでの利用は不可)
また、ノンブロッキングなスクリプトの読み込みにはLazyLoadとLABjsが便利そう。
以下それぞれの記述例。
//1.defer属性を利用(IEとFirefox3.5以上でのみ対応) <script type="text/javascript" src="hoge.js" defer></script>
//2.

