ミリ秒単位で時間を測定したい | 日付・時間操作 | JavaScript 目的別リファレンス

2024.09.22
スポンサーリンク

このプログラムでは、performance.now()メソッドを使用して、JavaScriptでの処理時間をミリ秒単位で正確に測定します。performance.now()は、ページが読み込まれてからの経過時間をミリ秒単位で返し、高精度な時間測定が可能です。

スポンサーリンク

使用するメソッド: performance.now()

JavaScriptのperformance.now()メソッドは、ナノ秒精度の高いタイミングを提供し、処理時間の計測に使用されます。このメソッドは、ページがロードされてからの時間をミリ秒単位で返し、時間測定において高い精度を持っています。

ミリ秒単位で時間を測定するプログラム

以下のコードでは、ループ処理にかかる時間をミリ秒単位で測定し、結果を表示します。

HTMLとJavaScriptコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ミリ秒単位で時間を測定する方法（performance.now()）</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            padding: 20px;
        }
        pre {
            background: #f4f4f4;
            border-left: 3px solid #ccc;
            padding: 10px;
            margin: 20px 0;
        }
    </style>

    <script>
        window.onload = function() {
            // 時間測定の開始
            const start = performance.now();

            // シンプルな時間のかかる処理（例: ループ）
            for (let i = 0; i < 1000000; i++) {
                // ループ中の計算処理
                Math.sqrt(i);
            }

            // 時間測定の終了
            const end = performance.now();

            // 結果をHTMLに表示（処理にかかった時間をミリ秒単位で表示）
            const timeTaken = end - start;
            document.getElementById('timeTaken').textContent = `処理にかかった時間: ${timeTaken.toFixed(3)} ミリ秒`;
        }
    </script>
</head>
<body>

    <h1>ミリ秒単位で時間を測定する方法（performance.now()）</h1>

    <div id="timeTaken"></div>

</body>
</html>

プログラムの解説

このプログラムでは、performance.now()を使って、ループ処理にかかる時間をミリ秒単位で計測しています。performance.now()はページがロードされてからの経過時間を精密に計測し、startからendの差分を取ることで処理時間を測定しています。

Performanceのメソッド一覧(抜粋)

メソッド名 説明
performance.now() ページがロードされてからの経過時間をミリ秒単位で返します。
performance.mark() 特定の時間にマークを付けてパフォーマンス測定を行います。
performance.measure() 2つのマーク間のパフォーマンス測定を行います。
スポンサーリンク