クリックごとにどれくらいのリソースが消費されますか?リアクト対バニラ

React は、他の JavaScript フレームワークと同様に、私たちが考えもしない多くのことを舞台裏で処理します。

それは問題ありません。開発者としての私たちの仕事は問題を解決することであり、実装はシンプルであるほど良いのです。フレームワークの機能をすべて詳細に理解する必要は必ずしもありません。

JavaScript は興味深い言語です。これはブラウザの王様であり、ブラウザは今でも頻繁に使用されているため、すぐに消えることはないと思います。

実際、多くのネイティブ アプリ (iOS、Android、スマート TV) は、ネイティブ テクノロジーと Web テクノロジーの両方を使用したハイブリッド ソリューションを実行します。

この投稿では、React とバニラ JavaScript バージョンの単純なカウンターをテストしたいと思います。

Chrome DevTools を使用したパフォーマンスの測定

まず、Chrome が提供する「パフォーマンス」という便利なタブについて話しましょう。このタブには、Web アプリケーションのパフォーマンスを測定する記録機能が含まれています。

この投稿では、JS ヒープ、ノード、リスナーという 3 つの主要な指標に焦点を当てます。

JS ヒープ: ヒープは、オブジェクト、配列、関数が保存される JavaScript のメモリ領域です。プリミティブ値 (数値、文字列、ブール値) と関数呼び出しを保持するスタックとは異なり、ヒープは動的なメモリ割り当てを管理します。

DOM ノード: DOM ノードは、Web ページの HTML 内の個々の要素、属性、またはテキストであり、ドキュメント オブジェクト モデル (DOM) で表されます。

イベント リスナー: JavaScript では、イベント リスナーは HTML 要素上の特定のイベント (クリック、キーの押下、マウスの動きなど) を待つ関数です。イベントが発生すると、リスナーがトリガーされ、応答してコードが実行されます。

デモ: 基本的な React カウンターの構築

はい、UI はシンプルなカウンターです。 UI は、クリック ハンドラーを備えた単なるボタンです。ボタンをクリックするたびにカウンターが増加します。

• 反応デモ

React コードは次のようになります:

"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: margin: auto>
      <a href="#" style="{{" display: padding: fontsize: border: solid black width: textalign: margintop: onclick="{incrementClickHandler}">
        Increment {counter}
      </a>
    </div>
  );
}

コードは一目瞭然です。注意すべき点の 1 つは、デモは Next.js 上で実行されるため、「クライアントを使用する」必要があるということです。それ以外は、単なる基本的な React コンポーネントです。

反応カウンター UI

20 秒でワンクリックだけ

ここで、Chrome で [パフォーマンス] タブを開き、レコード アイコンをクリックし、ボタンを 1 回だけクリックしながら 20 秒間実行します。 20 秒後のパフォーマンス結果は次のようになります:

ワンクリックで数値がどのように変化するかをご覧ください:

	React
JS Heap	3.4MB
Nodes	47
Listeners	287

?

1 秒あたりのクリックで 20 秒

ここで、さらに 20 秒間実行します。今回は 1 秒に 1 回ボタンをクリックします。結果を見てみましょう:

	React
JS Heap	4MB
Nodes	46
Listeners	331

React について注意すべき 2 つの点:

a) 状態変数が更新されると、コンポーネントは再レンダリングされます。つまり、この場合、コンポーネントは 20 回レンダリングされたことになります。

b) 仮想 DOM のおかげで、React は更新する必要があるノードのみを更新します。

次に、グラフに戻って、緑の線 (ノード) が一定のままである一方で、青い線 (JS ヒープ) と黄色の線 (リスナー) がどのように増加するかを見てみましょう。

ワンクリック実行と比較して数値があまり変わらなかったことにも言及する価値があります。

デモ: Vanilla JavaScript カウンターの構築

同じ UI ができましたが、今回はフレームワークを使用せず、標準の HTML と JavaScript で構築されています。

• バニラデモ。

"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: margin: auto>
      <a href="#" style="{{" display: padding: fontsize: border: solid black width: textalign: margintop: onclick="{incrementClickHandler}">
        Increment {counter}
      </a>
    </div>
  );
}

言及すべきことの 1 つは、次の要素の必要性です:

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

これは JavaScript で操作されてコンテンツを更新します:

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

バニラカウンターUI

20 秒でワンクリックだけ

もう一度、録音アイコンをクリックし、ボタンを 1 回だけクリックして 20 秒間実行します。

結果を見てみましょう:

	Vanilla
JS Heap	1.7MB
Nodes	16
Listeners	20

1 秒あたりのクリックで 20 秒

もう一度、録音アイコンをクリックしてさらに 20 秒間実行しますが、今回はボタンを 1 秒に 1 回クリックします。結果をチェックしてください:

	Vanilla
JS Heap	2.3MB
Nodes	42
Listeners	77

React の例と同様に、青い線 (JS ヒープ) と黄色の線 (リスナー) が時間の経過とともに増加しました。ただし、緑色の線 (ノード) は一定ではありません。ボタンをクリックすると増加します。

ガベージ コレクションについて一言

ガベージ コレクション: ガベージ コレクション アルゴリズムが依存する主な概念は、参照の概念です。

JavaScript はガベージ コレクションを自動的に処理します。手動でトリガーする必要はありません。前の例では、リソースがどのように消費されるかを見てきましたが、ある時点で、JavaScript はガベージ コレクターを通じてこれらのリソースの一部を解放します。

結論

リソース消費という点では、1 回クリックしても 20 回クリックしてもそれほど違いはありません。クリックが発生するとすぐに JavaScript がリソースを割り当て、その後のクリックではリソースが消費され続けます。ただし、この変化は、ゼロから 1 クリックへの移行ほど重要ではありません。

両方のバージョンの 20 クリックの最終値を見てみましょう:

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

React がより多くのリソースを消費するのは当然です。それはフレームワークを使用するコストです。

重要な違いの 1 つは、React では最初からすべてのノードがアタッチされるのに対し、バニラ バージョンではクリックが発生するたびにノードが追加されることです。ただし、最終的には両方のバージョンのノード数がほぼ同じになりました。

デモは非常にシンプルで、このレベルではパフォーマンスの点で大きな違いはありません。前述したように、フレームワークの使用には代償がかかりますが、フレームワークが提供するすべての機能と利便性を考慮すると、それだけの価値があります。

以上がクリックごとにどれくらいのリソースが消費されますか?リアクト対バニラの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。