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

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

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

반응 카운터 UI

20초, 단 한 번의 클릭

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

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

	React
JS Heap	3.4MB
Nodes	47
Listeners	287

?

초당 클릭수 20초

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

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

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

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

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

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

바닐라 카운터 UI

20초, 단 한 번의 클릭

다시 녹화 아이콘을 클릭하고 버튼을 한 번만 클릭하여 20초 동안 실행하겠습니다.

결과 살펴보기:

	Vanilla
JS Heap	1.7MB
Nodes	16
Listeners	20

초당 클릭수 20초

다시 녹화 아이콘을 클릭하고 20초 더 실행하도록 하겠지만 이번에는 1초에 한 번씩 버튼을 클릭하겠습니다. 결과를 확인하세요:

	Vanilla
JS Heap	2.3MB
Nodes	42
Listeners	77

React 예시와 마찬가지로 파란색 선(JS Heap)과 노란색 선(Listeners)이 시간이 지남에 따라 증가했습니다. 그러나 녹색 선(노드)은 일정하지 않습니다. 버튼을 클릭할수록 증가합니다.

가비지 컬렉션에 대한 몇 가지 단어

가비지 컬렉션: 가비지 컬렉션 알고리즘이 의존하는 주요 개념은 참조 개념입니다.

JavaScript가 자동으로 가비지 수집을 처리합니다. 수동으로 트리거할 필요가 없습니다. 이전 예에서는 리소스가 어떻게 소비되는지 살펴보았지만 어느 시점에서는 JavaScript가 가비지 수집기를 통해 이러한 리소스 중 일부를 해제합니다.

결론

1번 클릭과 20번 클릭은 리소스 소비 측면에서 크게 다르지 않습니다. 클릭이 발생하자마자 JavaScript는 리소스를 할당하고 후속 클릭은 계속해서 리소스를 소비합니다. 그러나 점프는 0에서 1클릭으로의 전환만큼 중요하지 않습니다.

두 버전 모두에서 20회의 클릭에 대한 최종 값을 살펴보겠습니다.

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

React가 더 많은 리소스를 소비하는 것은 당연합니다. 이것이 프레임워크를 사용하는 데 드는 비용입니다.

한 가지 주요 차이점은 React가 처음부터 모든 노드를 연결하는 반면 바닐라 버전은 클릭이 발생할 때 노드를 추가한다는 것입니다. 하지만 결국 두 버전 모두 거의 동일한 노드 수를 갖게 되었습니다.

데모는 상당히 간단하고 이 수준에서는 성능면에서 큰 차이가 없습니다. 앞서 언급했듯이 프레임워크를 사용하는 데는 비용이 들지만 프레임워크가 제공하는 모든 기능과 편의성을 고려하면 그만한 가치가 있습니다.

위 내용은 클릭은 얼마나 많은 리소스를 소비합니까? 리액트 대 바닐라의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!