高解像度時間APIの発見

コアポイント

• 高解像度APIは、システムクロック偏差または調整の影響を受けない、現在の時間を提供するJavaScriptインターフェースであり、従来のDate.now()メソッドよりも信頼性の高い正確なパフォーマンス測定オプションを提供します。
• 高解像度の時間APIは、すべてのブラウザーによって広くサポートされておらず、主にInternet Explorer 10、Firefox 15（refixed）、およびChrome 20（「WebKit」プレフィックスを使用）をサポートしています。関数を使用して、ブラウザのサポートとプレフィックスの使用をテストすることをお勧めします。
• 開発者は、コード構造を大幅に変更せずにDate.now()をperformance.now()に置き換えることで、高解像度の時間APIをコードに簡単に統合できます。

今日の世界では、パフォーマンスが重要です。開発者は、ソフトウェアのパフォーマンスを正確に測定できる必要があります。 Web開発に従事している人には、W3Cが確実に時間カウントするための新しいAPIを提供します。これは高解像度の時間APIです。この記事では、高解像度の時間APIを調べて、それを使用する方法を示します。 関数のパフォーマンスを測定するために、JavaScriptメソッドの使用に使用されるWeb開発者。通常、タイミングコードは次のようになります：

Date.now()

メソッドは、システム時間に基づいて現在のタイムスタンプを取得します。残念ながら、その精度は異なるユーザーエージェント間で異なるため、あまり信頼できません。この問題を解決するために、W3Cは高解像度の時間APIを標準化します。 APIは、現在の時間をサブミリ秒分解能を提供し、システムクロック偏差または調整の影響を受けない「

<code class="language-javascript">var startTime = Date.now();

// 一个耗时的函数
foo();
var test1 = Date.now();

// 另一个耗时的函数
bar();
var test2 = Date.now();

// 打印结果
console.debug("Test1 time: " + (test1 - startTime));
console.debug("Test2 time: " + (test2 - test1));</code>

JavaScriptインターフェイス」と呼ばれています。 2012年10月23日、仕様はW3Cの推奨の推奨事項になりました。これは、推奨事項になる前の最後のステップです。 12月17日に、W3Cの推奨事項になりました（12月17日に更新）。

Date.now()高解像度時間API これは、1つの方法しか含まれていないために読んだ最も簡単なAPIであることを認めなければなりません。このAPIは、ナビゲーションタイミングAPIでも使用されるパフォーマンスインターフェイスを拡張します。聞いたことがない場合は、ナビゲーションタイミングAPI：Pageの読み込みを効果的に分析する方法をご覧ください。露出する唯一の方法はnow()であり、これはDOMHighResTimeStampを返し、現在の時間をミリ秒単位で示します。タイムスタンプは非常に正確で、1000分の1ミリ秒の精度があります。 1970年1月1日の00:00:00 UTC以降に経過したミリ秒数をDate.now()に戻しますが、performance.now()（ドキュメントナビゲーションが開始）から呼び出されたミリ秒数をperformance.timing.navigationStart()に戻すことに注意してください。分数部分はマイクロ秒です。 performance.now()とDate.now()のもう1つの重要な違いは、後者が単調に増加しているため、2つの呼び出しの違いが負のものではないことです。多分あなたは、高解像度の時間APIがあなたのコードをどのように変更するのか疑問に思っています。良いニュースは、何も変わらないということです。 performance.now()をDate.now()に置き換えるだけで、測定の精度を向上させることができます。これを念頭に置いて、以前のコードは次のように書き換えられます：performance.now()

<code class="language-javascript">var startTime = Date.now();

// 一个耗时的函数
foo();
var test1 = Date.now();

// 另一个耗时的函数
bar();
var test2 = Date.now();

// 打印结果
console.debug("Test1 time: " + (test1 - startTime));
console.debug("Test2 time: " + (test2 - test1));</code>

互換性

現在、高解像度の時間APIをサポートするブラウザはごくわずかです。このAPIをサポートする唯一のデスクトップブラウザーは、Internet Explorer 10、Firefox 15（refixed）、およびChrome 20（「webkit」プレフィックス

）です。 Chromeは、バージョン24から始まる未定のバージョンを使用しているようです。執筆時点では、このAPIをサポートするモバイルブラウザはありません。サポート範囲は広くないため、ブラウザのサポート状況をテストするには最初に機能が必要です。ブラウザがAPIの未定バージョンを使用すると、次の関数が空の文字列を返します。プレフィックスバージョンを使用すると、プレフィックスが返されます。 APIがサポートされていない場合は、nullを返します。 performance.webkitNow()

このAPIをサポートしていないブラウザの場合、シムを使用できます。 Shimの著者Tony Gentilcoreは、APIの貢献者の1人です。 「JavaScriptのより良いタイマー」というタイトルの彼の投稿で、GentilCoreは最初にネイティブサポートを検索し、次にフォールバックとして

<code class="language-javascript">var startTime = performance.now();

// 一个耗时的函数
foo();
var test1 = performance.now();

// 另一个耗时的函数
bar();
var test2 = performance.now();

// 打印更精确的结果
console.debug("Test1 time: " + (test1 - startTime));
console.debug("Test2 time: " + (test2 - test1));</code>

メソッドを使用するコードを書きました。コードは次のようになります：

Date.getTime()

<code class="language-javascript">function getPrefix() {
  var prefix = null;
  if (window.performance !== undefined) {
    if (window.performance.now !== undefined)
      prefix = "";
    else {
      var browserPrefixes = ["webkit","moz","ms","o"];
      // 测试所有厂商前缀
      for(var i = 0; i < browserPrefixes.length; i++) {
        if (window.performance[browserPrefixes[i] + "Now"] != undefined) {
          prefix = browserPrefixes[i];
          break;
        }
      }
    }
  }
  return prefix;
}</code>

すべてのコンテンツを統合します

このセクションでは、簡単なデモページをご覧ください。デモは最初にブラウザのサポートをテストし、次に

メソッドを使用してベンチマークに2つの仮想関数に依存する

と呼ばれる関数を使用します。 APIに依存しているdoBenchmark関数を導入したことに注意してください。その唯一の目的は、不必要な複製を避け、コードをより簡潔にすることです。デモンストレーションのソースコードは次のとおりです。（質問要件と一致せず、長すぎるため、長いサンプルコードはここで省略されています）performance.now() getTime()

結論

この記事では、高解像度の時間APIが何であるか、どのように使用するかについて説明しました。私が述べたように、それはまだ広くサポートされていないので、Webアプリケーションを正確にテストするためには、しばらく待つ必要があります。ただし、ご覧のとおり、APIには1つの方法しか含まれていないため、APIは非常に簡単です。したがって、ブラウザのサポートが改善されると、高解像度の時間への移行は迅速かつ簡単になります。

（質問要件と一致せず、長すぎるため、FAQの部分はここで省略されています）

以上が高解像度時間APIの発見の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。