Discovering the High Resolution Time API

Core points

• High Resolution Time API is a JavaScript interface that provides current time with submillisecond resolution, not affected by system clock deviation or adjustment, and provides more reliable and accurate performance measurement options than traditional Date.now() methods. .
• The high-resolution time API is not widely supported by all browsers, mainly supporting Internet Explorer 10, Firefox 15 (unprefixed), and Chrome 20 (with the "webkit" prefix). It is recommended to use functions to test browser support and prefix usage.
• Developers can easily integrate high-resolution time APIs into their code by replacing Date.now() with performance.now(), thus improving measurement accuracy without major changes to the code structure.

In today's world, performance is crucial. Developers need to be able to accurately measure the performance of their software. For those engaged in web development, W3C provides a brand new API to reliably time count, which is the high resolution time API. This article will explore the high-resolution time API and show how to use it. To measure the performance of functions, web developers used to use the JavaScript method. Usually, the timing code looks like this:

Date.now()

Method retrieves the current time stamp based on system time. Unfortunately, its accuracy varies between different user agents and is therefore not very reliable. To solve this problem, W3C standardizes the high-resolution time API. The API is described as "

<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>

A JavaScript interface that provides the current time of submillisecond resolution and is not affected by system clock deviation or adjustments

". On October 23, 2012, the specification became the W3C recommendation recommendation—the last step before it became the recommendation. On December 17, it became the W3C recommendation (updated on December 17). Date.now() How to work with high resolution time API

I must admit that this is the easiest API I have ever read because it contains only one method. This API extends the Performance interface, which is also used by the Navigation Timing API. If you've never heard of it, check out the Navigation Timing API: How to analyze page loading effectively. The only way to be exposed is now(), which returns a DOMHighResTimeStamp indicating the current time in milliseconds. The timestamp is very accurate, with an accuracy of one thousandth of a millisecond. Note that although Date.now() returns the number of milliseconds elapsed since 00:00:00 UTC on January 1, 1970, performance.now() returns the number of milliseconds invoked from performance.timing.navigationStart() (the document navigation starts) to performance.now(), The fractional part is microseconds. Another important difference between Date.now() and performance.now() is that the latter is monotonically increasing, so the difference between the two calls will never be negative. Maybe you're wondering how the high resolution time API will change your code. The good news is that it won't change anything. You can improve the accuracy of your measurements by simply replacing Date.now() with performance.now(). With this in mind, the previous code will be rewritten as follows:

<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>

Compatibility

Currently, only a few browsers support high-resolution time APIs. The only desktop browsers that support this API are Internet Explorer 10, Firefox 15 (unprefixed), and Chrome 20 (with "webkit" prefix, performance.webkitNow()). Chrome seems to be using the unprefixed version starting with version 24. At the time of writing, no mobile browser supports this API. Since the support range is not wide, a function is first needed to test the browser support situation and whether it is prefixed. The following function will return an empty string when the browser uses the unprefixed version of the API. If a prefixed version is used, the prefix is ​​returned. If the API is not supported, return null.

<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>

For browsers that do not support this API, you can use a shim. Shim's author Tony Gentilcore is one of the contributors to the API. In his post titled "A better timer for JavaScript", Gentilcore wrote code that first searches for native support and then uses the Date.getTime() method as a fallback. The code looks like this:

<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>

Integrate all content

This section will guide you through a simple demo page. The demo will first test the browser support, and then use a function called doBenchmark which relies on two virtual functions to benchmark using the performance.now() method. Note that I introduced an API-independent getTime() function. Its sole purpose is to avoid unnecessary duplication and make the code more concise. The source code for the demonstration is as follows: (The lengthy sample code is omitted here because it does not match the question requirements and is too long)

Conclusion

In this article, I've covered what the high resolution time API is and how to use it. As I mentioned, it hasn't been widely supported yet, so to accurately test your web application you'll have to wait for a while. However, as you can see, the API is very simple because it contains only one method. Therefore, once browser support is improved, migration to high resolution time will be quick and easy.

(The FAQs part is omitted here because it does not match the question requirements and is too long)

The above is the detailed content of Discovering the High Resolution Time API. For more information, please follow other related articles on the PHP Chinese website!