주니어를 위한 간단한 최적화 검증 방법

📌 1. 실행 횟수 비교 (console.count)

리액트의 Strict Mode에서는 console.log가 두 번씩 실행되기 때문에 로직이 복잡한 경우 코드의 정확한 실행 횟수를 파악하기가 어렵다. 물론, 크롬 개발자 도구 CDD (Console Debugging Display) 창의 메시지 개수를 통해 실행 횟수를 유추할 수도 있다. 하지만 console 외에도 다른 메시지가 함께 출력될 수 있고, 특히 여러 곳에서 console.log를 사용하는 경우 원하는 코드 블록의 실행 횟수를 명확하게 파악하기 더욱 어려워진다.

이 때 console.count를 사용할 수 있다. 로그에 호출 횟수가 포함되어 특정 함수나 로직이 몇 번 실행되는지 직관적으로 알 수 있다.

예를 들어, 테스트 하고 싶은 코드를 실행하면 :

const handleScroll = () => {
  // 기존 로직...
  console.count("🚀 스크롤 이벤트 발생!")
  
};

useEffect(() => {
  window.addEventListener('scroll', handleScroll);

  return () => {
    window.removeEventListener('scroll', handleScroll);
  };
}, [handleScroll]);

아래 이미지처럼 출력된다.

위 이미지에는 나오지 않지만, 최적화 이전에는 위아래로 스크롤을 3번 왕복하면 스크롤 이벤트가 총 60번 발생한다.

아래 코드처럼 throttle을 적용한 후 테스트를 해보자. 과연 최적화가 되었을지....!!

const updateScroll = () => {
  // 기존 로직...
  console.count("🚀 스크롤 이벤트 발생!")
  
};

const handleScroll = throttle({ callback: updateScroll, delay: 100 }); // 🥑 이 부분이 추가됨

useEffect(() => {
  window.addEventListener('scroll', handleScroll);

  return () => {
    window.removeEventListener('scroll', handleScroll);
  };
}, [handleScroll]);

결과적으로, 이벤트 호출 횟수가 60번에서 10번으로 눈에 띄게 감소하여 약 67% 정도 최적화 되었음을 알 수 있다.

📌 2. Chrome DevTools Performance Profiler 사용

두 번째 방법은 개발도구의 성능탭에서 profiler 기능을 사용하는 것이다.

1. 개발자 도구 (F12, command + shift + i) → 성능 (performance) 탭으로 이동
2. Record (●) 버튼을 눌러 성능 프로파일링 시작
3. 테스트 하고 싶은 행위 ex) 스크롤을 여러 번 수행
4. Stop 버튼을 눌러 프로파일링 종료

프로파일링을 종료하면 많은 정보를 알 수 있지만 일단 하단의 요약(summary) 탭만 확인해보자!
요약 탭에는 여러 항목들이 있는데 대표적인 항목만 알고 넘어가자

1️⃣ JS (JavaScript)

• 페이지에서 실행된 JavaScript 코드 실행 시간
• 이벤트 핸들러, setTimeout, requestAnimationFrame, Promise, React의 렌더링 함수 등이 여기에 포함된다.
• 값이 크다면 불필요한 연산을 줄이거나, 웹 워커(Web Worker)를 활용하는 것이 필요할 수 있다.

2️⃣ Rendering (렌더링)

• 브라우저가 DOM과 CSSOM을 결합하여 화면을 그리는 데 걸린 시간
• 요소 크기 변경, transform, opacity 변경 등 스타일과 관련된 연산이 포함
• 최적화 방법: CSS 애니메이션 활용, will-change 속성 활용, 불필요한 스타일 변경 최소화.

3️⃣ Painting (페인팅)

• 브라우저가 요소를 실제로 화면에 그리는 데 걸린 시간을 나타낸다.
• 레이아웃이 결정된 후, 픽셀을 생성하는 단계.
• 최적화 방법: GPU 가속(translate3d 활용), contain 속성 사용, 복잡한 box-shadow 최소화.

4️⃣ System (시스템)

• 운영체제(OS)에서 실행된 작업에 사용된 시간
• 브라우저 내부 프로세스, OS 관련 작업 등이 포함될 수 있습니다.
• 사용자가 직접 최적화하기 어려운 부분이므로, 다른 항목을 먼저 최적화하는 것이 좋다.

스크롤 이벤트 코드를 예시로 성능을 측정해봤다
측정 기간 (합계)가 달라서 비율로 비교해보자

최적화 전 퍼포먼스 🤯

스크립트 항목의 경우,
295 / 5354 * 100 = 5.509899140829287(%)

최적화 후 퍼포먼스 🤫

동일한 스크립트 항목
167 / 5024 * 100 = 3.324044585987261(%)

결과적으로, 스크립트 실행 시간이 약 2%p가 줄어들었다.