1. 🗺️ 개념 지도 (Overview)

이 주제를 한 문장으로 설명하면?

한 줄 요약:

DOM이나 스타일이 변경될 때 브라우저가 레이아웃을 다시 계산하는 것이 리플로우, 시각적 속성만 다시 그리는 것이 리페인트이며, 리플로우가 훨씬 비싼 작업이다.

이 주제가 왜 중요한가?

• 성능 최적화 핵심
• 렌더링 병목의 원인
• UX (버벅임) 직접 영향

[리플로우 & 리페인트]
├── 브라우저 렌더링 파이프라인
│   ├── DOM + CSSOM → Render Tree
│   ├── Layout (Reflow)
│   ├── Paint (Repaint)
│   └── Composite
├── 리플로우 유발 속성
│   ├── width, height, margin, padding
│   └── offsetTop, getBoundingClientRect 등 강제 동기 레이아웃
├── 리페인트 유발 속성
    ├── color, background-color, box-shadow
    └── visibility

2. 📖 핵심 개념 정리

⚠️ 단순 복붙 금지! 반드시 자신의 말로 재작성할 것

2-1. 브라우저 렌더링 파이프라인

브라우저가 HTML/CSS를 받아서 화면에 그리기까지의 전체 흐름.

1. Parse: HTML → DOM, CSS → CSSOM 생성
2. Render Tree: DOM + CSSOM 결합 (display:none 제외)
3. Layout(Reflow): 각 노드의 위치/크기 계산
4. Paint(Repaint): 픽셀로 그리기 (색상, 테두리, 텍스트 등)
5. Composite: 레이어를 합성하여 최종 화면 출력 (GPU)

핵심 포인트:

• 단계는 앞에서 뒤로만 진행되며, 뒤에서 앞으로 돌아가면 비용이 큼
• transform/opacity는 Composite 단계만 발생 → 가장 저렴

2-2. 리플로우 (Reflow / Layout)

DOM 요소의 위치, 크기, 구조가 바뀌어서 브라우저가 전체 또는 일부 레이아웃을 다시 계산해야 하는 작업. 변경된 요소뿐만 아니라 그 부모/자식 요소까지 영향을 줄 수 있어 매우 비싸다.

• CSS 속성 변경
  • width, height, margin, padding, border, top, left, position, font-size 등
• DOM 조작
  • 요소 추가/삭제/이동
• 레이아웃 정보 읽기 (강제 동기 레이아웃)
  • offsetWidth, offsetHeight, getBoundingClientRect(), scrollTop 등

  간단하게 알고가는 강제 동기 레이아웃

  브라우저가 아직 계산 안 한 레이아웃을 바로 계산하라고 강제로 시키는 것

  원래 브라우저는 최대한 한 번에 처리하려는 경향이 있음

  JS 실행 → (모아서) 스타일 계산 → 레이아웃 → 페인트

// ❌: 읽고 쓰고 읽고 쓰고 → 강제 동기 레이아웃 반복
for (let i = 0; i < 100; i++) {
  const width = el.offsetWidth; // 읽기 → 리플로우 강제 발생
  el.style.width = width + 1 +

핵심 포인트:

• 리플로우는 Paint → Composite 단계를 모두 재실행시킴 → 가장 비싼 작업
• 강제 동기 레이아웃(Forced Synchronous Layout) = 읽기/쓰기 교차 패턴

2-3. 리페인트 (Repaint / Paint)

레이아웃(위치/크기)은 변하지 않고, 시각적 스타일(색상, 배경, 그림자 등)만 바뀌는 경우 발생. 레이아웃 재계산 없이 픽셀만 다시 그리므로 리플로우보다 저렴하지만 여전히 비용이 있다.

• 색상 관련
  • color, background-color, border-color, outline
• 그림자
  • box-shadow, text-shadow
• 가시성
  • visibility (display:none은 리플로우 유발)

// 리페인트만 발생 (레이아웃 변경 없음)
el.style.backgroundColor = 'red'; // 리페인트만
el.style.visibility = 'hidden'; // 리페인트만 (공간 유지)

// 리플로우 + 리페인트 모두 발생
el.style.display = 'none';   // 리플로우 (공간도 사라짐)

핵심 포인트:

• visibility:hidden vs display:none → 리페인트 vs 리플로우
• opacity:0은 Composite만 변경 → 가장 저렴 (레이어 분리된 경우)

3. 🔍 깊이 이해하기

왜 이렇게 설계됐을까? (Design Decision)

이 기술/개념이 왜 이런 방식으로 만들어졌는지 배경을 이해하자

• 브라우저는 화면 갱신을 60fps(16.6ms마다)로 유지해야 함 → 렌더링 예산 한정
• 레이아웃 계산은 전체 문서에 영향을 미칠 수 있어 파이프라인 최상위에 위치
• GPU를 활용하는 Composite 단계는 CPU 작업 없이 처리 → 성능 병목 없음
• transform/opacity를 별도 레이어로 분리하면 메인 스레드 개입 없이 합성 가능

다른 개념과의 비교

유사한 개념과 차이점 정리 (면접에서 자주 나오는 포인트)

실무에서는 어떻게 쓰이나?

실제 프로젝트에서 마주칠 수 있는 상황

• animation 시 transform 사용 (reflow 방지)
• DOM 변경 최소화
• class 변경 방식 사용

4. 🎤 구두 설명 연습

면접관 앞에서 말하듯이 작성. 읽는 용도가 아니라 말하는 연습을 위한 섹션

"~이 뭔가요?" 질문에 대한 답변 스크립트

[도입 - 핵심 정의 먼저]
"리플로우는 DOM 요소의 위치나 크기가 변경되어 레이아웃을 다시 계산하는 작업이고,
 리페인트는 시각적 속성(색상, 그림자 등)이 변경되어 픽셀을 다시 그리는 작업입니다."

[부연 - 왜/어떻게]
"브라우저 렌더링 파이프라인은 Layout → Paint → Composite 순서인데,
 리플로우는 이 전체를 다시 실행시켜 매우 비쌉니다.
 반면 리페인트는 Paint → Composite만 재실행하고,
 transform/opacity 변경은 Composite만 건드려 가장 저렴합니다."

[마무리 - 실무 연결]
"실무에서는 애니메이션에 width 대신 transform을 사용하고,
 여러 DOM 변경을 DocumentFragment로 일괄 처리해 리플로우 횟수를 줄이는 방식으로 최적화합니다."

⏱️ 1분 요약 버전

면접관이 바쁠 때, 딱 1분 안에 설명하는 버전

리플로우 = 레이아웃 재계산 → 가장 비쌈 (파이프라인 전체 재실행)
리페인트 = 픽셀 다시 그리기 → 중간 비용
Composite only = transform/opacity → 가장 저렴, GPU 처리
최적화 핵심: 리플로우 줄이기 → 읽기/쓰기 분리, transform 사용, 배치 처리

5. ❓ 예상 면접 질문 & 답변

각 질문에 대해 STAR 구조 혹은 두 문장 요약으로 작성

기본 질문

심화 질문 (꼬리질문 대비)

🧨 함정/난이도 높은 질문

const boxes = document.querySelectorAll('.box');
boxes.forEach(box => {
  box.style.width = box.offsetWidth + 10 + 'px'; // 읽고 쓰기 반복
}

6. 📝 나만의 요약 노트

공부하고 나서 진짜 내 머릿속에 남은 것들만 정리

오늘 이 주제에서 가장 중요한 것 3가지

1. 리플로우 > 리페인트 > Composite 순으로 비용이 높음. 가능한 아래 단계만 발생시키자
2. 읽기/쓰기 교차 패턴은 강제 동기 레이아웃을 유발 → 반드시 읽기 먼저, 쓰기 나중
3. 애니메이션은 transform/opacity만 → GPU가 처리하므로 메인 스레드 부담 없음