[웹 개발 지식] - Reflow, Repaint

Reflow

웹페이지 요소의 크기 또는 위치가 변할 때, 변경된 레이아웃을 다시 계산하여 렌더 트리에 적용하는 과정

• 크기 관련 속성: width, height, padding, margin, border-width
• 위치 관련 속성: position, top, left
• 레이아웃 관련 속성: display, flex
• 폰트 관련 속성: font-size, font-weight

리플로우는 보통 CPU를 활용해 연산

 

Repaint

요소의 시각적 표현(색상, 테두리 등)이 변할 때, 변경된 시각적 표현을 다시 계산하여 렌더 트리에 반영하는 과정

• 색상 관련 속성: color, background-color
• 테두리 관련 속성: border-color, border-radius

리페인트는 보통 GPU를 활용하여 처리

 

Reflow VS Repaint

발생 조건	요소의 크기·위치·레이아웃 변경	요소의 시각적 스타일 변경
작업 부하	크고 무거움 (레이아웃 재구성)	상대적으로 가벼움 (시각적 스타일 재적용)
자원 활용	CPU 중심	GPU 중심
영향 범위	하위 요소 전체 재계산	해당 요소만 재계산

리플로우는 일반적으로 리페인트까지 유발하기 때문에, 더 큰 성능 부담을 일으킴.

 

리플로우 최소화 방법

1. DOM 업데이트 일괄 처리 (Batch Update)
   • DOM 변경사항을 한 번에 묶어 적용하여 리플로우 발생 빈도 감소
2. 레이아웃 속성 접근 최소화
   • offsetHeight, offsetWidth와 같은 속성을 반복 접근하지 말고, 변수를 활용하여 재사용
3. 레이아웃 변화가 적은 속성 사용
   • CSS의 position 속성을 쓸 때는 fixed, absolute 등 레이아웃 변화가 적은 값 사용을 권장