Combien de ressources un clic consomme-t-il ? Réagir contre Vanilla

React, comme tout autre framework JavaScript, gère beaucoup de choses en coulisses auxquelles nous ne pensons souvent même pas.

Et ce n'est pas grave : notre travail en tant que développeurs est de résoudre les problèmes, et plus la mise en œuvre est simple, mieux c'est. Vous n'avez pas toujours besoin de comprendre chaque détail de ce qu'un framework fait pour vous.

JavaScript est un langage intéressant ; c'est le roi des navigateurs, et les navigateurs sont encore très utilisés, donc je ne le vois pas disparaître de si tôt.

En fait, de nombreuses applications natives (iOS, Android, Smart TV) exécutent des solutions hybrides utilisant à la fois les technologies natives et Web.

Dans cet article, je souhaite tester un compteur simple dans React par rapport à sa version JavaScript Vanilla.

Mesurer les performances avec Chrome DevTools

Parlons d’abord d’un onglet utile proposé par Chrome appelé Performances. Cet onglet comprend une fonctionnalité d'enregistrement qui mesure les performances d'une application Web.

Dans cet article, je vais me concentrer sur trois métriques clés : JS Heap, Nodes et Listeners.

JS Heap : Le tas est une région de mémoire en JavaScript où les objets, les tableaux et les fonctions sont stockés. Contrairement à la pile, qui contient des valeurs primitives (nombres, chaînes, booléens) et des appels de fonctions, le tas gère l'allocation dynamique de mémoire.

Nœuds DOM : un nœud DOM est un élément individuel, un attribut ou un texte dans le code HTML d'une page Web, représenté dans le modèle d'objet de document (DOM).

Écouteurs d'événements : en JavaScript, les écouteurs d'événements sont des fonctions qui attendent des événements spécifiques (par exemple, des clics, des pressions sur des touches, des mouvements de souris) sur des éléments HTML. Lorsque l'événement se produit, l'écouteur se déclenche et exécute le code en réponse.

Démo : créer un compteur de réaction de base

Très bien, l'interface utilisateur est un simple compteur. L'interface utilisateur n'est qu'un bouton avec un gestionnaire de clics. Chaque fois que vous cliquez sur le bouton, le compteur incrémente.

• Démo React

Le code React ressemble à ceci :

"use client";

import { useState } from "react";

export default function Page() {
  const [counter, setCounter] = useState(0);

  const incrementClickHandler = (event: { preventDefault: () => void }) => {
    event.preventDefault();

    setCounter((prevCounter) => prevCounter + 1);
  };

  return (
    <div style={{ maxWidth: 800, margin: "0 auto" }}>
      <a
        href="#"
        style={{
          display: "inline-block",
          padding: "20px 40px",
          fontSize: 28,
          border: "1px solid black",
          width: "100%",
          textAlign: "center",
          marginTop: 40,
        }}
        onClick={incrementClickHandler}
      >
        Increment {counter}
      </a>
    </div>
  );
}

Le code est assez explicite. Une chose à noter est que la démo s'exécute sur Next.js, c'est pourquoi nous avons besoin de "utiliser le client". En dehors de cela, ce n'est qu'un composant de base de React.

Interface utilisateur du compteur de réaction

20 secondes et un seul clic

Maintenant, je vais ouvrir l'onglet Performances dans Chrome, cliquer sur l'icône d'enregistrement et le laisser fonctionner pendant 20 secondes tout en cliquant une seule fois sur le bouton. Au bout des 20 secondes, les résultats des performances ressemblent à ceci :

Découvrez comment un simple clic fait passer les chiffres à :

	React
JS Heap	3.4MB
Nodes	47
Listeners	287

?

20 secondes avec un clic par seconde

Maintenant, je vais le laisser fonctionner encore 20 secondes, mais cette fois je cliquerai sur le bouton une fois par seconde. Jetons un coup d'œil aux résultats :

	React
JS Heap	4MB
Nodes	46
Listeners	331

Deux choses à noter à propos de React :

a) Lorsqu'une variable d'état est mise à jour, le composant est restitué, ce qui signifie que dans ce cas, le composant a été rendu 20 fois.

b) Grâce au DOM virtuel, React ne met à jour que les nœuds qui doivent être mis à jour.

Maintenant, revenons au graphique et voyons comment la ligne bleue (JS Heap) et la ligne jaune (Auditeurs) s'incrémentent, tandis que la ligne verte (Nœuds) reste constante.

Il convient également de mentionner que les chiffres n'ont pas beaucoup changé par rapport à l'exécution en un clic.

Démo : Créer un compteur JavaScript Vanilla

Maintenant, nous avons la même interface utilisateur, mais cette fois, elle est construite avec du HTML et du JavaScript Vanilla, sans aucun framework impliqué.

• Démo vanille.

"use client";

import { useState } from "react";

export default function Page() {
  const [counter, setCounter] = useState(0);

  const incrementClickHandler = (event: { preventDefault: () => void }) => {
    event.preventDefault();

    setCounter((prevCounter) => prevCounter + 1);
  };

  return (
    <div style={{ maxWidth: 800, margin: "0 auto" }}>
      <a
        href="#"
        style={{
          display: "inline-block",
          padding: "20px 40px",
          fontSize: 28,
          border: "1px solid black",
          width: "100%",
          textAlign: "center",
          marginTop: 40,
        }}
        onClick={incrementClickHandler}
      >
        Increment {counter}
      </a>
    </div>
  );
}

Une chose à mentionner est la nécessité de l'élément suivant :

<html>
  <head>
    <script>
      let increment = 0;

      window.onload = function () {
        document.querySelector("#counter").innerText = increment;

        document.querySelector("a").addEventListener("click", function (event) {
          event.preventDefault();
          increment++;
          document.querySelector("#counter").innerText = increment;
        });
      };
    </script>
  </head>
  <body style="max-width: 800; margin: 0 auto; font-family: monospace;">
    <a
      href="#"
      style="
        display: inline-block;
        padding: 20px 40px;
        font-size: 28px;
        border: 1px solid black;
        width: 100%;
        text-align: center;
        text-decoration: none;
        color: black;
        margin-top: 40;
        box-sizing: border-box;
      "
      >Increment <span id="counter"></span>
    </a>
  </body>
</html>

qui est manipulé avec JavaScript pour mettre à jour son contenu :

<span id="counter"></span>

Interface utilisateur du compteur Vanilla

20 secondes et un seul clic

Encore une fois, je vais cliquer sur l'icône d'enregistrement et le laisser fonctionner pendant 20 secondes, en cliquant une seule fois sur le bouton.

Jetez un œil aux résultats :

	Vanilla
JS Heap	1.7MB
Nodes	16
Listeners	20

20 secondes avec un clic par seconde

Encore une fois, je vais cliquer sur l'icône d'enregistrement et le laisser fonctionner pendant encore 20 secondes, mais cette fois, je cliquerai sur le bouton une fois par seconde. Découvrez les résultats :

	Vanilla
JS Heap	2.3MB
Nodes	42
Listeners	77

Tout comme dans l'exemple React, la ligne bleue (JS Heap) et la ligne jaune (Listeners) ont augmenté avec le temps. Cependant, la ligne verte (nœuds) n'est pas constante ; il augmente à mesure que l'on clique sur le bouton.

Quelques mots sur la collecte des déchets

Garbage Collection : Le concept principal sur lequel s'appuient les algorithmes de garbage collection est le concept de référence.

JavaScript gère automatiquement le garbage collection pour nous ; nous n'avons pas besoin de le déclencher manuellement. Dans les exemples précédents, nous avons vu comment les ressources sont consommées, mais à un moment donné, JavaScript se charge de libérer certaines de ces ressources via son garbage collector.

Conclusion

Un clic ou vingt clics, ce n’est pas si différent en termes de consommation de ressources. Dès qu'un clic se produit, JavaScript alloue des ressources et les clics suivants continuent de consommer des ressources. Cependant, le saut n'est pas aussi significatif que le passage de zéro à un clic.

Jetons un coup d'œil aux valeurs finales pour 20 clics dans les deux versions :

	Vanilla	React
JS Heap	2.3MB	4.0MB
Nodes	42	46
Listeners	77	331

Il est logique que React consomme plus de ressources ; c'est le coût de l'utilisation d'un framework.

Une différence clé est que React attache tous les nœuds depuis le début, tandis que la version Vanilla ajoute des nœuds au fur et à mesure des clics. Cependant, au final, les deux versions se sont retrouvées avec à peu près le même nombre de nœuds.

La démo est assez simple, et à ce niveau, il n’y a pas de différence significative en termes de performances. Comme mentionné précédemment, il y a un prix à payer pour utiliser le framework, mais cela en vaut la peine compte tenu de toutes les fonctionnalités et commodités qu'il offre.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!