JavaScript and more: 4 creative approaches to measuring time in browsers

Using an infinite synchronous loop in a web worker (not in a service worker)

▍Advantages

1. Achievable accuracy expressed in microseconds.
2. .
3. , , . - .
4. . , setInterval, terminate , . MDN : « terminate() Worker . , ».

▍

1. Even though this method makes it possible to work with time intervals that are less than a millisecond, sending messages to the main thread works asynchronously. That is, it is impossible to carry out certain actions in the main thread with the same accuracy with which the worker decides that these actions need to be performed.
2. This method fully loads the stream, which can lead to increased battery consumption on phones.
3. This method requires the support of web workers.
4. An infinite loop in a web worker does not pause if the tab associated with it is inactive.

Using CSS animations for events related to time (in particular - animationiteration)

▍Advantages

1. Automatically pause if the browser tab becomes inactive. In this case, the event of interest to us simply does not occur. Therefore, you do not need to worry about solving the problem of processing many events that have accumulated during the time when the tab was inactive and then activated.
2. div DOM. , React-, , . div .
3. , , . — :
   
   

   .addEventListener("animationiteration", fun).

4. animation-delay.

▍

1. . , , .
2. Dependence on DOM and CSSOM. Other CSS rules may affect those that describe the animation. Therefore, I advise you to create for the organization of the timer a kind of randomly named previously nonexistent tag like <just-a-timer-element></<just-a-timer-element>. Maybe - is it worth creating a custom element, inside which CSS animation code is neatly hidden? (all of these are pretty controversial ideas, actually).
3. This method does not work if the element has a style display: none;.
4. Inaccuracy. In accordance with my tests, the accuracy of the countdown can be about 1 ms. You, to find out exactly how it works for you, can experiment with an example, a link to which is given below.

Using the svg tag (SMIL animations)

<svg>
  <rect>
    <animate
      attributeName="rx"
      values="0;1"
      dur="1s"
      repeatCount="indefinite"
    />
  </rect>
</svg>

▍Advantages

1. This method works even if a style is assigned to the SVG element display: none;.
2. The countdown automatically stops when the SVG element is removed from the DOM.
3. Event generation does not start until the page is fully loaded.
4. The "timer" is automatically paused if the tab becomes inactive.

▍ Disadvantages

1. As in the case of counting time intervals using CSS animation, the application of this method may seem incomprehensible to other programmers.
2. Dependence on DOM and CSSOM. That is - here we have the same undesirable features that have already been described for the method of counting time using CSS animation. Namely - the possibility of disruption of the "timer" due to other CSS-rules.
3. It is not supported in IE and Edge (until the browser is transferred from Microsoft to Chromium).
4. Inaccuracy. In accordance with my tests, the deviations of such a timer from the most accurate method can be very impressive 15 milliseconds. You can verify this yourself by experimenting with the example, a link to which is given below.
5. The countdown does not start until the page is fully loaded. True, this “minus” of this method may turn out to be a “plus” in some situations.

Using Web Animations API

function ownSetTimeout(callback, duration) {
  const div = document.createElement('div');

  const keyframes = new KeyframeEffect(div, [], { duration, iterations: 1 });

  const animation = new Animation(
    keyframes,
    document.timeline
  );

  animation.play();

  animation.addEventListener('finish', () => {
    callback();
  });
}

▍Advantages

1. A self-contained solution that does not require interaction with the DOM.
2. A programmer unfamiliar with this approach will easily understand the meaning of the corresponding code.
3. "Timer" pauses on an inactive tab.

▍ Disadvantages

1. Web Animations API - the technology is still experimental. Do not use it in production.
2. Very poor browser support. This method is likely to work only in Chromium.
3. With all the advantages of this solution, it, nevertheless, may seem to someone far from intuitive.
4. The fact that the “timer” is paused on an inactive tab may turn out to be a minus of this solution if it is used as an alternative setTimeout.
5. This method cannot be used to count intervals. Only an event is available to the programmer onfinish.
6. Low accuracy. According to my experiments, the error can easily be ± 5 milliseconds.

Bonus

Summary