Wie viele Ressourcen verbraucht ein Klick? Reagieren vs. Vanilla

React erledigt wie jedes andere JavaScript-Framework viele Dinge hinter den Kulissen, an die wir oft nicht einmal denken.

Und das ist in Ordnung – unsere Aufgabe als Entwickler ist es, Probleme zu lösen, und je einfacher die Implementierung, desto besser. Sie müssen nicht immer jedes Detail verstehen, was ein Framework für Sie tut.

JavaScript ist eine interessante Sprache; Es ist der König der Browser, und Browser werden immer noch häufig verwendet, daher glaube ich nicht, dass es so schnell verschwinden wird.

Tatsächlich führen viele native Apps (iOS, Android, Smart TVs) Hybridlösungen aus, die sowohl native als auch Web-Technologien nutzen.

In diesem Beitrag möchte ich einen einfachen Zähler in React im Vergleich zu seiner Vanilla-JavaScript-Version testen.

Messen der Leistung mit Chrome DevTools

Lassen Sie uns zunächst über eine nützliche Registerkarte namens „Leistung“ sprechen, die Chrome bietet. Diese Registerkarte enthält eine Aufzeichnungsfunktion, die die Leistung einer Webanwendung misst.

In diesem Beitrag werde ich mich auf drei Schlüsselmetriken konzentrieren: JS-Heap, Knoten und Listener.

JS Heap: Der Heap ist ein Speicherbereich in JavaScript, in dem Objekte, Arrays und Funktionen gespeichert werden. Im Gegensatz zum Stapel, der primitive Werte (Zahlen, Zeichenfolgen, boolesche Werte) und Funktionsaufrufe enthält, verwaltet der Heap die dynamische Speicherzuweisung.

DOM-Knoten: Ein DOM-Knoten ist ein einzelnes Element, Attribut oder Text im HTML einer Webseite, dargestellt im Document Object Model (DOM).

Ereignis-Listener: In JavaScript sind Ereignis-Listener Funktionen, die auf bestimmte Ereignisse (z. B. Klicks, Tastendrücke, Mausbewegungen) auf HTML-Elementen warten. Wenn das Ereignis eintritt, löst der Listener aus und führt als Reaktion Code aus.

Demo: Aufbau eines einfachen Reaktionszählers

Okay, die Benutzeroberfläche ist ein einfacher Zähler. Die Benutzeroberfläche ist nur eine Schaltfläche mit einem Klick-Handler. Jedes Mal, wenn auf die Schaltfläche geklickt wird, erhöht sich der Zähler.

• Demo reagieren

Der React-Code sieht so aus:

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

Der Code ist ziemlich selbsterklärend. Zu beachten ist, dass die Demo auf Next.js läuft, weshalb wir „Client verwenden“ benötigen. Ansonsten handelt es sich lediglich um eine grundlegende React-Komponente.

React Counter-Benutzeroberfläche

20 Sekunden und nur ein Klick

Jetzt öffne ich die Registerkarte „Leistung“ in Chrome, klicke auf das Aufnahmesymbol und lasse es 20 Sekunden lang laufen, während ich nur einmal auf die Schaltfläche klicke. Am Ende der 20 Sekunden sehen die Leistungsergebnisse wie folgt aus:

Sehen Sie, wie sich die Zahlen mit nur einem Klick auf Folgendes erhöhen:

	React
JS Heap	3.4MB
Nodes	47
Listeners	287

?

20 Sekunden mit einem Klick pro Sekunde

Jetzt lasse ich es noch 20 Sekunden lang laufen, aber dieses Mal klicke ich einmal pro Sekunde auf die Schaltfläche. Werfen wir einen Blick auf die Ergebnisse:

	React
JS Heap	4MB
Nodes	46
Listeners	331

Zwei Dinge, die Sie bei React beachten sollten:

a) Wenn eine Zustandsvariable aktualisiert wird, wird die Komponente neu gerendert, was bedeutet, dass die Komponente in diesem Fall 20 Mal gerendert wurde.

b) Dank des virtuellen DOM aktualisiert React nur die Knoten, die aktualisiert werden müssen.

Jetzt kehren wir zum Diagramm zurück und sehen, wie die blaue Linie (JS-Heap) und die gelbe Linie (Listener) ansteigen, während die grüne Linie (Knoten) konstant bleibt.

Erwähnenswert ist auch, dass sich die Zahlen im Vergleich zum Ein-Klick-Lauf nicht wesentlich verändert haben.

Demo: Erstellen eines Vanilla-JavaScript-Zählers

Jetzt haben wir die gleiche Benutzeroberfläche, aber dieses Mal ist sie mit Vanilla-HTML und JavaScript erstellt – ohne Frameworks.

• Vanille-Demo.

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

Zu erwähnen ist die Notwendigkeit des folgenden Elements:

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

das mit JavaScript manipuliert wird, um seinen Inhalt zu aktualisieren:

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

Vanilla Counter-Benutzeroberfläche

20 Sekunden und nur ein Klick

Noch einmal klicke ich auf das Aufnahmesymbol und lasse es 20 Sekunden lang laufen, wobei ich nur einmal auf die Schaltfläche klicke.

Sehen Sie sich die Ergebnisse an:

	Vanilla
JS Heap	1.7MB
Nodes	16
Listeners	20

20 Sekunden mit einem Klick pro Sekunde

Erneut klicke ich auf das Aufnahmesymbol und lasse es weitere 20 Sekunden laufen, aber dieses Mal klicke ich einmal pro Sekunde auf die Schaltfläche. Schauen Sie sich die Ergebnisse an:

	Vanilla
JS Heap	2.3MB
Nodes	42
Listeners	77

Genau wie im React-Beispiel nahmen die blaue Linie (JS Heap) und die gelbe Linie (Listeners) mit der Zeit zu. Allerdings ist die grüne Linie (Knoten) nicht konstant; sie erhöht sich, wenn auf die Schaltfläche geklickt wird.

Ein paar Worte zur Müllabfuhr

Garbage Collection: Das Hauptkonzept, auf dem Garbage Collection-Algorithmen basieren, ist das Konzept der Referenz.

JavaScript übernimmt automatisch die Speicherbereinigung für uns; Wir müssen es nicht manuell auslösen. In den vorherigen Beispielen haben wir gesehen, wie Ressourcen verbraucht werden, aber irgendwann kümmert sich JavaScript darum, einige dieser Ressourcen über seinen Garbage Collector freizugeben.

Abschluss

Ein Klick oder zwanzig Klicks sind hinsichtlich des Ressourcenverbrauchs kein großer Unterschied. Sobald ein Klick erfolgt, weist JavaScript Ressourcen zu und nachfolgende Klicks verbrauchen weiterhin Ressourcen. Allerdings ist der Sprung nicht so bedeutend wie der Übergang von null auf einen Klick.

Schauen wir uns die Endwerte für 20 Klicks in beiden Versionen an:

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

Es macht Sinn, dass React mehr Ressourcen verbraucht; Das sind die Kosten für die Verwendung eines Frameworks.

Ein wesentlicher Unterschied besteht darin, dass React alle Knoten von Anfang an anhängt, während die Vanilla-Version Knoten hinzufügt, sobald die Klicks erfolgen. Am Ende hatten jedoch beide Versionen nahezu die gleiche Anzahl an Knoten.

Die Demo ist recht einfach und auf dieser Ebene gibt es keinen signifikanten Unterschied in Bezug auf die Leistung. Wie bereits erwähnt, ist die Nutzung des Frameworks mit einem Preis verbunden, aber es lohnt sich, wenn man all die Funktionen und Annehmlichkeiten bedenkt, die es bietet.

Das obige ist der detaillierte Inhalt vonWie viele Ressourcen verbraucht ein Klick? Reagieren vs. Vanilla. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!