브라우저 렌더링 파이프라인 — Reflow와 Repaint가 성능에 미치는 영향에 대해 설명하세요

1. Reflow (리플로우 = 뼈대 공사)

개념: 요소의 크기나 위치가 바뀌어 화면 구조를 처음부터 다시 계산하는 작업.

원인: width, height, margin, 창 크기 조절 등.

성능 (🔴매우 큼): 연산량이 많아 화면이 버벅거리는(프레임 드롭) 가장 큰 원인입니다.

2. Repaint (리페인트 = 페인트칠)

개념: 크기나 위치는 그대로고 시각적 스타일(색상 등)만 다시 칠하는 작업.

원인: color, background-color, box-shadow 변경 등.

성능 (🟡중간): 뼈대 계산은 안 하지만 새로 그려야 해서 자원을 소모합니다.

도미노 현상: Reflow가 일어나면 Repaint는 무조건 따라옵니다. (뼈대를 바꿨으니 새로 칠해야 함)

DOM 조작 최소화: 요소 변경은 여러 번 나누지 말고 한 번에 묶어서 처리하세요.