ミリ秒単位で経過時間を計算したい | 日付・時間操作

このプログラムでは、performance.now()を使用して高精度なタイマーを使い、ミリ秒単位での経過時間を計算します。performance.now()は、ナノ秒精度のタイムスタンプを返し、実行時間の正確な測定に使用できます。

INDEX

使用するメソッド: performance.now()
ミリ秒単位で経過時間を計算するプログラム
1. HTMLとJavaScriptコード
2. プログラムの解説
Performanceのメソッド一覧(抜粋)
Windowオブジェクトメソッドの機能一覧

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

performance.now()メソッドは、ページがロードされた瞬間からの経過時間をミリ秒単位で返します。Date.now()よりも高精度で、ナノ秒レベルの精度を提供します。

ミリ秒単位で経過時間を計算するプログラム

以下のコードでは、1秒後に経過時間をミリ秒単位で計算し、表示しています。

HTMLとJavaScriptコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ミリ秒単位で経過時間を計算する方法（高精度タイマー）</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 startTime = performance.now();

            // 1秒待機後、経過時間を計算
            setTimeout(function() {
                const endTime = performance.now();
                const elapsedTime = endTime - startTime; // 経過時間をミリ秒で計算

                // 結果をHTMLに表示
                document.getElementById('elapsedTime').textContent = `経過時間: ${elapsedTime.toFixed(3)}ミリ秒`;
            }, 1000); // 1秒後に実行
        }
    </script>
</head>
<body>

    <h1>ミリ秒単位で経過時間を計算する方法（高精度タイマー）</h1>

    <div id="elapsedTime"></div>

</body>
</html>

プログラムの解説

このプログラムでは、performance.now()メソッドを使って高精度タイマーでの開始時間を取得し、1秒後に終了時刻と比較して経過時間を計算しています。performance.now()は、Date.now()よりも精度が高く、特に時間測定に適しています。

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

メソッド名	説明
`performance.now()`	ページロード後の経過時間をナノ秒精度でミリ秒単位で返します。
`performance.mark()`	タイムスタンプを作成し、パフォーマンスの測定点を追加します。
`performance.measure()`	2つのマーク間の経過時間を測定し、結果を返します。
`performance.clearMarks()`	特定のパフォーマンスマークを削除します。