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

HTML DOM console.timeEnd()メソッドの使い方を徹底解説

console.timeEnd()メソッドとは

console.timeEnd()メソッドは、console.time()で開始したタイマーを停止し、その間にコードの実行にかかった経過時間をコンソールに表示するためのメソッドです。コードの特定部分の処理時間を計測することで、パフォーマンス上のボトルネックがどこにあるのかを特定する際に非常に役立ちます。オプションのlabelパラメータを使用すると、停止するタイマーを指定することができます。

主な用途

  • ループ処理や関数の実行時間の計測
  • 複数の処理方式のパフォーマンス比較
  • ボトルネックとなっているコード箇所の特定

構文

console.timeEnd()メソッドの構文は以下の通りです。

console.timeEnd(label);

ここで、labelは省略可能なパラメータで、停止するタイマーを指定するために使用します。

使用例

実際にconsole.timeEnd()メソッドを使ったサンプルコードを見てみましょう。この例では、for文、while文、do-while文それぞれについて10万回の反復処理にかかる時間を計測します。

<!DOCTYPE html>
<html>
<body>
<h1>console.time() Method</h1>
<p>Click the below button to time the for,while and do-while loops for 100000 iterations</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>Press F12 key to view the performance result in your console view</p>
</body>
</html>

実行結果

このコードを実行すると、まず「TIMER」ボタンが表示された画面が出力されます。

TIMERボタンをクリックすると、開発者ツールのコンソールに各ループの実行時間が表示されます。結果を確認するには、F12キーを押してコンソールビューを開いてください。

コードの解説

上記の例では、以下のような仕組みで動作しています。

まず、クリックされるとLoopPerform()関数を実行する「TIMER」ボタンを作成しています。

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

LoopPerform()関数の内部では、for文・while文・do-while文の3種類のループが実行されます。そして、「for-loop」「while-loop」「do-while loop」というラベルを持つ合計3つのタイマーを作成し、それぞれのループのパフォーマンスを計測します。

console.time()メソッドはタイマーを開始するメソッドで、オプションのlabelパラメータを受け取り、内部のコードが実行されている間の経過時間をカウントします。console.timeEnd()メソッドはタイマーを停止し、結果をコンソールビューに表示します。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");
}

まとめ

console.time()とconsole.timeEnd()を組み合わせることで、ラベル付きのタイマーによる簡単なパフォーマンス計測が可能になります。外部ライブラリを導入することなく、ブラウザの開発者ツールだけで手軽にコードの実行速度を測定できるため、日々のデバッグや最適化作業にぜひ活用してみてください。

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

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

  2. HTML DOMのcreateEvent()メソッドとは？使い方を徹底解説

    HTML DOMのcreateEvent()メソッドは、イベントオブジェクトを生成するためのメソッドです。生成するイベントの種類は引数で指定します。なお、createEvent()で作成したイベントは、使用する前に必ず初期化する必要があります。また、作成したイベントをHTML要素へ通知（ディスパッチ）するには、対象のノードに対してdispatchEvent()メソッドを呼び出します。 構文 HTML DOM createEvent()メソッドの基本構文は以下のとおりです。 document.createEvent( eventType ) eventTypeは文字列型の必須パラメータで、生成