Chrome devtools - Rendering
React 디자인 원칙에 따르면 “React is not a generic data processing library. It is a library for building user interfaces.” 다음과 같이 UI를 구축하기 위한 라이브러리라고 명시되어 있습니다.
React는 data fetching 같은 작업보다 사용자 입력과 같은 상호작용을 우선순위에 두며 렌더링 지연(60FPS)을 최소화합니다. 다르게 표현하면 사람의 눈이 인식할 수 있는 60FPS 내에 화면 변화가 매끄럽게 이루어져야 좋은 사용자 경험(UX)를 제공할 수 있습니다.
본 글은 Frontend engineer로서 Application의 Reflow, Repaint, FPS(frames per second)를 Chrome devtools의 Rendering 탭을 통해 관측하고 개선하는 방법을 소개합니다.
Layout Shift Regions (Reflow)
Chrome DevTools Rendering 탭에서 Layout Shift Regions를 활성화하면 Reflow 여부를 시각적으로 확인할 수 있습니다.
Reflow는 DOM 요소의 크기나 위치가 변경될 때 발생하는 과정으로 과도하면 브라우저의 렌더링 성능이 저하되고 Frame drop이 생길 수 있습니다. Frame drop이 생겨 60FPS 아래로 내려가면 사용자는 끊김을 체감하게 되므로 Reflow를 최소화해야 합니다.
Paint Flashing (Repaint)
Chrome DevTools Rendering 탭에서 Paint Flashing를 활성화하면 Repaint 여부를 시각적으로 확인할 수 있습니다.
Repaint는 Reflow보다는 비용이 적지만 과도하면 브라우저의 렌더링 성능이 저하되고 Frame drop이 생길 수 있습니다. Frame drop이 생겨 60FPS 아래로 내려가면 사용자는 끊김을 체감하게 되므로 Repaint를 최소화해야 합니다.
Frame Rendering Stats (FPS)
Chrome DevTools Rendering 탭에서 Frame Rendering Stats를 활성화하면 화면 상단에 FPS 그래프가 표시되며, 초당 프레임 수를 확인할 수 있습니다.
- 렌더링된 프레임 (파란색 선)
- 부분적으로 표시된 프레임 (노란색 선)
- 프레임 누락(빨간색 선)
FPS는 초당 프레임 수(Frames Per Second)를 의미하며, 애니메이션이나 인터랙션이 매끄럽고 빠르게 이루어지는지 판단하는 중요한 지표입니다.
Application 점검하기
- expensive한 렌더링 최적화 (
memo,useMemo,useCallback활용) useEffect내에서 과도한 상태 업데이트 방지useDeferredValue활용하여 UI 업데이트 지연transform과opacity를 사용하여 Reflow 없이 GPU 가속을 활용하여 애니메이션을 실행- 가상화 (windowing)
- 오래 걸리는 작업 분할 (chunking)
- debounce, throttle을 활용하여 상태 변경 최소화