JavaScript et plus: 4 approches créatives pour mesurer le temps dans les navigateurs

Utilisation d'une boucle synchrone infinie dans un travailleur Web (pas dans un travailleur de service)

▍Avantages

1. Précision atteignable exprimée en microsecondes.
2. .
3. , , . - .
4. . , setInterval, terminate , . MDN : « terminate() Worker . , ».

▍

1. Même si cette méthode permet de travailler avec des intervalles de temps inférieurs à une milliseconde, l'envoi de messages au thread principal fonctionne de manière asynchrone. Autrement dit, il est impossible d'effectuer certaines actions dans le thread principal avec la même précision avec laquelle le travailleur décide que ces actions doivent être effectuées.
2. Cette méthode charge complètement le flux, ce qui peut entraîner une augmentation de la consommation de batterie des téléphones.
3. Cette méthode nécessite le soutien de travailleurs Web.
4. Une boucle infinie dans un travailleur Web ne s'arrête pas si l'onglet qui lui est associé est inactif.

Utilisation d'animations CSS pour des événements liés au temps (en particulier - animationiteration)

▍Avantages

1. Pause automatique si l'onglet du navigateur devient inactif. Dans ce cas, l'événement qui nous intéresse ne se produit tout simplement pas. Par conséquent, vous n'avez pas à vous soucier de résoudre le problème du traitement de nombreux événements qui se sont accumulés pendant le temps où l'onglet était inactif puis activé.
2. div DOM. , React-, , . div .
3. , , . — :
   
   

   .addEventListener("animationiteration", fun).

4. animation-delay.

▍

1. . , , .
2. Dépendance à DOM et CSSOM. D'autres règles CSS peuvent affecter celles qui décrivent l'animation. Par conséquent, je vous conseille de créer une organisation de temporisation pour une sorte de balise précédemment inexistante nommée arbitrairement <just-a-timer-element></<just-a-timer-element>. Peut-être - cela vaut-il la peine de créer un élément personnalisé, dans lequel le code d'animation CSS est soigneusement caché? (Ce sont toutes des idées assez controversées, en fait).
3. Cette méthode ne fonctionne pas si l'élément a un style display: none;.
4. Inexactitude. Conformément à mes tests, la précision du compte à rebours peut être d'environ 1 ms. Vous, pour savoir exactement comment cela fonctionne pour vous, pouvez expérimenter avec un exemple, un lien vers lequel est donné ci-dessous.

Utilisation de la balise svg (animations SMIL)

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

▍Avantages

1. Cette méthode fonctionne même si un style est attribué à l'élément SVG display: none;.
2. Le compte à rebours s'arrête automatiquement lorsque l'élément SVG est supprimé du DOM.
3. La génération d'événements ne démarre que lorsque la page est entièrement chargée.
4. Le "temporisateur" est automatiquement mis en pause si l'onglet devient inactif.

▍ Inconvénients

1. Comme dans le cas du comptage d'intervalles de temps à l'aide d'une animation CSS, l'application de cette méthode peut sembler incompréhensible aux autres programmeurs.
2. Dépendance à DOM et CSSOM. C'est-à-dire que nous avons ici les mêmes fonctionnalités indésirables qui ont déjà été décrites pour la méthode de comptage du temps en utilisant l'animation CSS. À savoir - la possibilité de perturbation du "temporisateur" en raison d'autres règles CSS.
3. Il n'est pas pris en charge dans IE et Edge (jusqu'à ce que le navigateur soit transféré de Microsoft vers Chromium).
4. Inexactitude. Conformément à mes tests, les écarts d'un tel temporisateur par rapport à la méthode la plus précise peuvent être très impressionnants de 15 millisecondes. Vous pouvez le vérifier vous-même en expérimentant l'exemple, dont le lien est donné ci-dessous.
5. Le compte à rebours ne démarre que lorsque la page est entièrement chargée. Certes, ce «moins» de cette méthode peut s'avérer être un «plus» dans certaines situations.

Utilisation de l'API Web Animations

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();
  });
}

▍Avantages

1. Une solution autonome qui ne nécessite pas d'interaction avec le DOM.
2. Un programmeur peu familier avec cette approche comprendra facilement la signification du code correspondant.
3. "Minuterie" s'arrête sur un onglet inactif.

▍ Inconvénients

1. API Web Animations - la technologie est encore expérimentale. Ne l'utilisez pas en production.
2. Prise en charge très médiocre du navigateur. Cette méthode est susceptible de fonctionner uniquement dans le chrome.
3. Avec tous les avantages de cette solution, elle peut néanmoins sembler loin d'être intuitive.
4. Le fait que la «minuterie» soit suspendue sur un onglet inactif peut s'avérer être un inconvénient de cette solution si elle est utilisée comme alternative setTimeout.
5. Cette méthode ne peut pas être utilisée pour compter les intervalles. Seul un événement est disponible pour le programmeur onfinish.
6. Précision faible. D'après mes expériences, l'erreur peut facilement être de ± 5 millisecondes.

Prime

Sommaire