1. 개요
VritualDOM의 동작에 관해 다룬 적이 있었다.
https://w-storage.tistory.com/m/71
[React] VitrualDOM을 알아보자!
1. 개요React는 최적화를 위한 기능들을 내장하고 있다. 그중 하나가 VirtualDOM이다.VirtualDOM은 무엇이고 어떻게 작동할까? 또 React는 왜 VirtualDOM을 사용할까?이번 글에서는 VirtualDOM과 동작 방식에 대
w-storage.tistory.com
여기서 DOM 트리를 수정할 때 Reflow, Repaint과정에서 리소스를 많이 소모한다 했는데, Reflow와 Repaint가 무엇인지 한번 알아보자!
2. Reflow
Reflow는 레이아웃을 변경하는 작업이며 레이아웃 단계에서 발생한다.
width, height같은 크기나 top, bottom같은 위치의 변경이 일어날 때 브라우저가 이와 관련된 컴포넌트들의 크기, 위치를 계산한다.
Reflow발생시 하위 컴포넌트들은 모두 Reflow가 발생한다.
이는 큰 부하로 작용할 수 있기 때문에 Reflow를 최소화하는 작업이 필요하다.
3. Repaint
Repaint는 시각적 요소를 변경하는 작업이며 페인트 단계에서 발생한다.
color, border같은 레이아웃의 변화는 없지만, 시각적 변화가 일어날 때 화면을 다시 그린다.
4. 최적화 방법
Reflow, Repaint 모두 부하를 주는 작업이지만 Reflow가 주는 부하가 상대적으로 더 크다.
Reflow의 최적화를 위해선 여러 변경사항을 묶어 batch update해주는 방법으로 Reflow빈도를 줄일 수 있다.
또한 offset같은 요소는 접근할 때 마다 Reflow가 발생할 수 있으므로 변수로 저장해 사용하면 Reflow빈도를 줄일 수 있다.
'프론트엔드' 카테고리의 다른 글
| [React, 짧은글] VirtualDOM을 이용하면 속도가 빨라질까? (0) | 2024.11.19 |
|---|---|
| [Next.js] Next.js 15버전에서 테스트 환경(Jest)세팅하기 (0) | 2024.11.18 |
| [React Native] React Native 버전 업그레이드 (2) | 2024.11.16 |
| [Typescript] Utility Types몇가지 알아보기 (Partial, Required, Pick, Omit, Readonly, Record) (0) | 2024.11.15 |
| [Javascript] var, let, const의 차이점 (0) | 2024.11.14 |