JavaScriptの読み込みと実行に関してのメモ(ページレンダリングの高速化)

2012.11.20 1:31 AM

ページの処理中に<script>タグが存在した場合、そのコードを読み込み実行している間はページのレンダリング処理が停止してしまう。このJavaScriptの読み込み&実行によるパフォーマンスへの影響を最小限に抑える方法。

・スクリプトはbody内の一番下に置く。</body>タグの直前。
・スクリプトをグループ化する。大量のjsファイルは1ファイルにまとめるなど可能な限りファイル数を減らしてhttpアクセスを最小限にする。(ビルド用ツールを利用するなど)
・ノンブロッキング(非同期)なスクリプトの読み込み

ノンブロッキング(非同期)なスクリプトの読み込み例を以下に記す。
1.defer属性を利用(IEとFirefox3.5以上でのみ対応)
2.<script>要素を動的に生成し、コードのダウンロードと実行を行う。
3.XMLHttpRequestによるスクリプトの挿入。(クロスドメインでの利用は不可)

また、ノンブロッキングなスクリプトの読み込みにはLazyLoadとLABjsが便利そう。
以下それぞれの記述例。

出典:(Nicholas C. Zakas 著『HIgh Performance JavaScript』Copyright 2010 Yahoo!, Inc.)

タグ:

Leave a Reply