最適化

遅延処理

処理が必要になった時点で、それを実行するようにします。

読み込みの遅延 (delay loading)

スクリプトや要素の読み込みを遅らせる方法について、次のページで解説しています。

実行の遅延 (delay execution)

ページの読み込み後または一定時間後に処理を実行する方法について、次のページで解説しています。

非同期処理

非同期で処理することで、複数の処理を同時に実行できます。また処理の完了を待たないため、応答時間を短縮できます。

非同期通信

  • Ajax
  • スクリプトを非同期で読み込む

不要なイベントハンドラの削除

イベントの処理後そのイベントを再び捕捉する必要がないならば、そのハンドラの登録を削除します。このときイベントのプロパティを参照すると、汎用的な方法でそれを行えます。

node.addEventListener( 'click', function( e )
    {
        e.currentTarget.removeEventListener(
            e.type,
            arguments.callee,
            false );

    }, false );

Strictモードではarguments.calleeの使用が禁止されているため、この方法は使えません。

参考

レンダリング処理の削減

DocumentFragmentを用いてDOMを構築することで、レンダリング処理をまとめて行わせられます。

コードの圧縮

コードを圧縮することで、ファイルの転送速度を向上できます。JavaScriptにおけるコードの圧縮とは、変数名を短い名前に置換したり、コメントや改行文字などのスクリプトの実行に影響しないコードを削除するなどして、コードのサイズを小さくすることを意味します。

この圧縮を行うツールとして、YUI Compressorなどがあります。

処理時間の計測

これは最適化の手法ではなく、最適化の効果を検証する方法です。

任意の処理

new Date()で、現在の日時を取得できます。よって処理前後でこれの差を求めることで、処理時間を調べられます。Dateオブジェクトはミリ秒単位で結果を返すため、処理時間もミリ秒単位で求められます。

var start = new Date();

// 何らかの処理

var time = new Date() - start;
alert( time );

一部のブラウザのみのサポートとなりますが、コンソールAPIのタイマーで測定する方法もあります。

実行例

setTimeout()で遅延実行し、計測時間を確認してみます。

var start = new Date();

window.setTimeout(
    function()
    {
        var time = new Date() - start;
        alert( time );

    }, 1000 ); // 1000ミリ秒後に実行

結果はブラウザによっても異なりますが、1001や1009のように表示されます。

ファイルの読み込み時間

Firebugのネット パネルで確認できます。JavaScriptだけを確認するには、フィルタで[JS]を指定します。

参考

関連ページ

JavaScriptのドキュメントから検索