클릭은 얼마나 많은 리소스를 소비합니까? 리액트 대 바닐라-JS 튜토리얼-php.cn

클릭은 얼마나 많은 리소스를 소비합니까? 리액트 대 바닐라

Mary-Kate Olsen

풀어 주다： 2024-10-22 06:24:30

원래의

406명이 탐색했습니다.

React는 다른 JavaScript 프레임워크와 마찬가지로 우리가 종종 생각조차 하지 않는 뒤에서 많은 일을 처리합니다.

괜찮습니다. 개발자로서 우리의 임무는 문제를 해결하는 것이며 구현이 간단할수록 좋습니다. 프레임워크가 수행하는 작업에 대해 항상 모든 세부 사항을 이해할 필요는 없습니다.

JavaScript는 흥미로운 언어입니다. 브라우저의 왕이고, 브라우저는 아직도 많이 사용되기 때문에 조만간 사라질 것 같지는 않습니다.

실제로 많은 네이티브 앱(iOS, Android, 스마트 TV)은 네이티브 기술과 웹 기술을 모두 사용하여 하이브리드 솔루션을 실행합니다.

이 게시물에서는 React의 간단한 카운터와 Vanilla JavaScript 버전을 테스트하고 싶습니다.

Chrome DevTools로 성능 측정

먼저 Chrome에서 제공하는 성능이라는 유용한 탭에 대해 이야기해 보겠습니다. 이 탭에는 웹 애플리케이션의 성능을 측정하는 녹음 기능이 포함되어 있습니다.

이 게시물에서는 JS 힙, 노드, 리스너라는 세 가지 주요 측정항목에 중점을 두겠습니다.

JS 힙: 힙은 객체, 배열 및 함수가 저장되는 JavaScript의 메모리 영역입니다. 기본 값(숫자, 문자열, 부울) 및 함수 호출을 보유하는 스택과 달리 힙은 동적 메모리 할당을 관리합니다.

DOM 노드: DOM 노드는 DOM(문서 개체 모델)으로 표현되는 웹 페이지 HTML 내의 개별 요소, 속성 또는 텍스트입니다.

이벤트 리스너: 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: 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>
  );
}

로그인 후 복사

코드는 설명이 매우 간단합니다. 한 가지 주목해야 할 점은 데모가 Next.js 위에서 실행된다는 것입니다. 이것이 바로 "클라이언트 사용"이 필요한 이유입니다. 그 외에는 그냥 기본적인 React 컴포넌트일 뿐입니다.

반응 카운터 UI

How Many Resources Does a Click Consume? React vs. Vanilla

20초, 단 한 번의 클릭

이제 Chrome에서 성능 탭을 열고 녹화 아이콘을 클릭한 후 버튼을 한 번만 클릭하면서 20초 동안 실행해 보겠습니다. 20초가 지나면 성능 결과는 다음과 같습니다.

How Many Resources Does a Click Consume? React vs. Vanilla

클릭 한 번으로 숫자가 어떻게 달라지는지 확인하세요.

	React
JS Heap	3.4MB
Nodes	47
Listeners	287

초당 클릭수 20초

이제 20초 더 실행해 보도록 하겠습니다. 이번에는 1초에 한 번씩 버튼을 클릭하겠습니다. 결과를 살펴보겠습니다:

How Many Resources Does a Click Consume? React vs. Vanilla

	React
JS Heap	4MB
Nodes	46
Listeners	331

React에 관해 주의할 두 가지 사항:

a) 상태 변수가 업데이트되면 구성 요소가 다시 렌더링됩니다. 즉, 이 경우 구성 요소가 20번 렌더링되었습니다.

b) 가상 DOM 덕분에 React는 업데이트가 필요한 노드만 업데이트합니다.

이제 차트로 돌아가 파란색 선(JS Heap)과 노란색 선(리스너)이 어떻게 증가하는지, 녹색 선(노드)은 그대로 유지되는지 살펴보겠습니다.

원클릭 실행에 비해 숫자가 크게 변하지 않았다는 점도 주목할 만합니다.

데모: 바닐라 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: 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>
  );
}

로그인 후 복사

한 가지 언급할 점은 다음 요소의 필요성입니다.

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

로그인 후 복사

자바스크립트로 조작하여 콘텐츠를 업데이트하는 경우: