HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOM console.time()メソッドの使い方を徹底解説！コードの実行時間を計測する方法

HTML DOM の console.time() メソッドは、特定のコードを実行するのにかかった経過時間を表示するためのメソッドです。これにより、コード全体または特定の部分のパフォーマンスを分析することができます。コードの実行時間を計測することで、より効率的なプログラムを作成できるようになります。

また、オプションのラベル（label）パラメータを使用することで、同じページ上に複数のタイマーを作成し、それぞれ個別に計測することも可能です。

構文（シンタックス）

HTML DOM console.time() メソッドの構文は以下のとおりです。

console.time(label)

ここで指定する label は任意のパラメータで、タイマーに名前をつけるために使用します。複数のタイマーを同時に運用する場合は、このラベルでそれぞれを識別します。

サンプルコード

それでは、console.time() メソッドの具体的な使用例を見てみましょう。以下の例では、for ループ、while ループ、do-while ループそれぞれについて、10万回の反復処理にかかる時間を計測しています。

<!DOCTYPE html>
<html>
<body>
<h1>console.time() Method</h1>
<p>下のボタンをクリックすると、for・while・do-while の各ループを10万回実行した時間を計測します</p>
<button type="button" onclick="LoopPerform()">TIMER</button>
<script>
    var i,j,k;
    i=0,j=0,k=0;
    function LoopPerform(){
        console.time("for-loop");
        for (; i < 100000; i++){}
        console.timeEnd("for-loop");
        console.time("while-loop");
        while(j<100000)
            j++;
        console.timeEnd("while-loop");
        console.time("do-while loop");
        do{k++;}
        while(k<100000);
        console.timeEnd("do-while loop");
    }
</script>
<p>F12キーを押すと、コンソール画面でパフォーマンス結果を確認できます</p>
</body>
</html>

実行結果

上記のコードを実行すると、まず次のような画面が表示されます。

HTML DOM console.time()メソッドの使い方を徹底解説！コードの実行時間を計測する方法

「TIMER」ボタンをクリックすると、各ループの処理時間がコンソールに出力されます。

HTML DOM console.time()メソッドの使い方を徹底解説！コードの実行時間を計測する方法

コードの解説

このサンプルでは、まずユーザーがクリックすると LoopPerform() 関数を実行するボタンを作成しています。

<button type="button" onclick="LoopPerform()">TIMER</button>

LoopPerform() 関数の中には、for ループ、while ループ、do-while ループが含まれており、3種類のループそれぞれのパフォーマンスを測定するために、「for-loop」「while-loop」「do-while loop」というラベルを持つ合計3つのタイマーが作成されています。

console.time() メソッドはタイマーを開始するメソッドです。オプションのラベルパラメータを受け取り、その間に実行されるコードの経過時間をカウントします。計測対象となるコードは、console.time() と console.timeEnd() メソッドの間に記述します。コードの実行が完了すると、かかった時間がコンソールウィンドウに表示されます。

function LoopPerform(){
    console.time("for-loop");
    for (; i < 100000; i++){}
    console.timeEnd("for-loop");
    console.time("while-loop");
    while(j<100000)
        j++;
    console.timeEnd("while-loop");
    console.time("do-while loop");
    do{k++;}
    while(k<100000);
    console.timeEnd("do-while loop");
}

なお、計測結果を確認するにはブラウザの開発者ツール（WindowsならF12キー）を開き、コンソールタブを表示してください。ラベルごとに「〜ms」という形式で実行時間が出力されます。

  1. HTML DOMのconsole.groupEnd()メソッドとは？使い方とサンプルコードを徹底解説

    HTML DOMのconsole.groupEnd()メソッドは、コンソール上で表示されるメッセージグループの「終了」を示すために使用されるメソッドです。このメソッドを呼び出すことで、現在開いているメッセージグループから抜け出し、以降の出力はグループの外側に表示されるようになります。構文console.groupEnd()メソッドの構文は以下の通りです。console.groupEnd()引数は不要で、非常にシンプルに使えます。また、開いているメッセージグループが存在しない状態で呼び出しても、エラーにはならない点も覚えておきましょう。サンプルコードそれでは、console.groupEnd()

  2. HTML DOM console.groupCollapsed()メソッドの使い方をわかりやすく解説

    HTML DOMのconsole.groupCollapsed()メソッドは、折りたたまれた（collapsed）状態のメッセージグループの開始を指定するためのメソッドです。このメソッドを呼び出した後にコンソールへ出力したメッセージは、すべて折りたたまれたグループ内に表示されます。構文console.groupCollapsed()メソッドの構文は以下のとおりです。console.groupCollapsed(label)引数のlabelには、グループに表示するラベル名を指定します。ラベルは省略可能です。サンプルコードここで、console.groupCollapsed()メソッドの具体的な使