JavaScriptでマイクロ秒単位で時間を計測する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでマイクロ秒単位で時間を計測する方法について現役エンジニアが解説しています。High Resolution Timeと呼ばれ、経過時間を取得する時により正確に実装する場合に利用するものです。サンプルにperformance APIを利用してみます。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptでマイクロ秒単位で時間を計測する方法について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。

また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptでマイクロ秒単位で時間を計測する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

High Resolution Timeとは

High Resolution Time(現在はHigh Resolution Time Level 2)とは、あまり聞きなれない言葉かもしれません。参考として、下記ページに分かりやすい説明があります。(高分解能な計時

要約を抜粋すするとこの仕様は、[ ミリ秒より細かい( sub-millisecond )分解能であって, かつ 外的な時計調整( system clock skew or adjustments )の対象にされない ]ような,時刻起点, 現在の時刻を供するAPIを規定する。とあります。

具体的には、何かの経過時間を取得する時により正確に実装する場合に利用するものです。より正確に計算を行うため、ミリ秒よりも細かい時間で、かつ外部要因で時間が変更されない仕様となっています。

 

JavaScriptでマイクロ秒単位で計測する方法

High Resolution Timeでの値を利用するためには、performance APIを利用します。now()メソッドを利用して、ページが表示されてからの経過時間をDOMHighResTimeStamp型で取得します。

var time = performance.now()

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

実際に書いてみよう

それでは実際にperformance.now()を使用して、マイクロ単位で時間を計測する方法を書いてみましょう。

<html>
<head>
<title>JavaScriptでマイクロ秒単位で時間を計測する方法</title>
</head>
 <body>
  処理スタート<br>
  <button onclick="getStartTime()">START</button><br>
  <br>
  処理停止<br>
  <button onclick="stopTime()">STOP</button><br>
  <script type="text/javascript">
   var StartTime //開始時間
   var EndTime //終了時間
   var StartTime_Date //開始時間
   var EndTime_Date //終了時間
   function getStartTime() {
     // 開始時間を取得します
     StartTime = performance.now() //詳細なミリ秒数
     StartTime_Date = Date.now() //ミリ秒数
   }
   function stopTime() {
     // 終了時間を取得します
     EndTime = performance.now() //詳細なミリ秒数
     EndTime_Date = Date.now() //ミリ秒数
     var TempTime = EndTime ? StartTime //詳細な経過時間
     var TempTime_Date = EndTime_Date ? StartTime_Date // 経過時間
     alert('開始から終了までは' + TempTime_Date + 'ミリ秒かかりました。\n詳細には' + TempTime + 'ミリ秒かかりました。')
    }
  </script>
 </body>
</html>

今回は、Date.now()との比較が出来るようにサンプルを作成してみました。Webアプリのパフォーマンスの確認などに利用できるかと思います。

筆者プロフィール

小宮山晃史(こみやまこうじ)

現在はOracle系システムの導入コンサルに勤め、仕事でコーディングをする機会は少なくなくなっているが、ライフワークで数多くの言語を勉強中。

iphoneのアプリ開発やWEBサーバの構築など幅広く挑戦しています。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。

プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。