브라우저 Reflow와 Repaint (3): 실무에서 자주 만나는 예제로 완성하기

// ❌ Before
const header = document.querySelector<HTMLElement>('.header')!;
 
window.addEventListener('scroll', () => {
  const height = header.offsetHeight; // 읽기: 강제 레이아웃 후보
 
  if (window.scrollY > 80 && height !== 48) {
    header.style.height = '48px'; // 쓰기: Layout 유발
    header.style.boxShadow = '0 2px 8px rgba(0, 0, 0, 0.15)';
  } else if (window.scrollY <= 80 && height !== 80) {
    header.style.height = '80px';
  }
});

flowchart LR
  E["scroll 이벤트<br/>(초당 수십 회)"] --> T{이번 프레임에<br/>이미 예약했나?}
  T -- 예 --> SKIP[아무것도 안 함]
  T -- 아니오 --> R[rAF 예약]
  R --> F{80px 경계를<br/>넘나들었나?}
  F -- 아니오 --> NOOP[DOM 접근 없음]
  F -- 예 --> C[클래스 토글 1번]
 
  style SKIP fill:#f1f5f9,stroke:#94a3b8,color:#111
  style NOOP fill:#f1f5f9,stroke:#94a3b8,color:#111
  style C fill:#bbf7d0,stroke:#16a34a,color:#111

/* ✅ After: 헤더를 흐름에서 분리하고, 변화는 transform과 그림자로 */
.header {
  position: fixed; /* 축 ②: 주변 배치에 영향 없음 */
  inset: 0 0 auto 0;
  height: 80px;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
 
.header--shrunk {
  transform: translateY(-16px) scale(0.95); /* 축 ③: Composite */
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.15); /* Paint까지만 */
}

// ✅ After: 상태가 바뀌는 순간에만 DOM을 만진다
const header = document.querySelector<HTMLElement>('.header')!;
let shrunk = false;
let ticking = false;
 
window.addEventListener('scroll', () => {
  if (ticking) return;
  ticking = true;
 
  requestAnimationFrame(() => {
    const next = window.scrollY > 80;
 
    if (next !== shrunk) {
      shrunk = next;
      header.classList.toggle('header--shrunk', shrunk); // 경계를 넘을 때 1번
    }
 
    ticking = false;
  });
});

/* ❌ 동작하지 않음: auto로는 트랜지션 불가 */
.accordion__body {
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease;
}
.accordion--open .accordion__body {
  height: auto;
}

/* ✅ After: 측정 없이 CSS만으로 */
.accordion__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
 
.accordion--open .accordion__body {
  grid-template-rows: 1fr;
}
 
.accordion__inner {
  overflow: hidden;
  min-height: 0; /* grid 자식이 0까지 줄어들 수 있게 */
}

// JavaScript는 토글만
trigger.addEventListener('click', () => {
  accordion.classList.toggle('accordion--open');
});

// ❌ Before: 최악의 패턴
messages.forEach((msg) => {
  list.innerHTML += `<li class="message">${msg.text}</li>`;
});

innerHTML += 가 매 순회마다 하는 일
 
1. 기존 HTML 전체를 문자열로 직렬화   (항목이 늘수록 점점 느려짐)
2. 새 문자열을 붙여서 전체를 다시 파싱
3. 기존 노드 전부 파괴 후 재생성      (이벤트 리스너도 사라짐)
 
500개 추가 = 이 작업을 500번, 매번 점점 커지는 리스트로

// ✅ After: 문서 밖에서 조립하고 한 번에 붙인다
const fragment = document.createDocumentFragment();
 
messages.forEach((msg) => {
  const li = document.createElement('li');
  li.className = 'message';
  li.textContent = msg.text;
  fragment.appendChild(li);
});
 
list.appendChild(fragment); // 라이브 DOM 변경 1번
 
// 채팅이라면: 쓰기가 끝난 뒤에 읽기 1번은 정당한 비용
list.scrollTop = list.scrollHeight;

// ❌ Before: 이벤트마다 측정하고 Layout 속성으로 이동
element.addEventListener('pointermove', (e) => {
  const rect = element.getBoundingClientRect(); // 매번 읽기
 
  element.style.left = `${e.clientX - rect.width / 2}px`; // 매번 Layout
  element.style.top = `${e.clientY - rect.height / 2}px`;
});

측정은 → 드래그 시작할 때 1번
이동은 → transform으로 (Composite)
반영은 → requestAnimationFrame으로 프레임당 1번

// ✅ After
let grabX = 0;
let grabY = 0;
let nextX = 0;
let nextY = 0;
let frameId = 0;
 
element.addEventListener('pointerdown', (e) => {
  const rect = element.getBoundingClientRect(); // 읽기는 여기서 1번만
  grabX = e.clientX - rect.left;
  grabY = e.clientY - rect.top;
 
  element.setPointerCapture(e.pointerId);
});
 
element.addEventListener('pointermove', (e) => {
  if (!element.hasPointerCapture(e.pointerId)) return;
 
  nextX = e.clientX - grabX; // 계산만 하고
  nextY = e.clientY - grabY;
 
  if (frameId) return; // 이미 예약됐으면 값만 갱신
 
  frameId = requestAnimationFrame(() => {
    element.style.transform = `translate(${nextX}px, ${nextY}px)`; // 쓰기
    frameId = 0;
  });
});

// ❌ Before: 읽기와 쓰기가 뒤섞임
function openTooltip(trigger: HTMLElement, tip: HTMLElement) {
  tip.style.display = 'block'; // 쓰기
  const triggerRect = trigger.getBoundingClientRect(); // 읽기 💥
  tip.style.left = `${triggerRect.left}px`; // 쓰기
  const tipRect = tip.getBoundingClientRect(); // 읽기 💥
  if (triggerRect.bottom + tipRect.height > window.innerHeight) {
    tip.style.top = `${triggerRect.top - tipRect.height}px`; // 쓰기
  } else {
    tip.style.top = `${triggerRect.bottom}px`;
  }
}

// ✅ After: 읽기 → 계산 → 쓰기 3단계로 정렬
function openTooltip(trigger: HTMLElement, tip: HTMLElement) {
  // 1) 읽기: 필요한 측정을 전부 먼저
  const triggerRect = trigger.getBoundingClientRect();
  const tipRect = tip.getBoundingClientRect();
  const viewportHeight = window.innerHeight;
 
  // 2) 계산: DOM 접근 없이 순수 계산만
  const openUpward = triggerRect.bottom + tipRect.height + 8 > viewportHeight;
  const top = openUpward ? triggerRect.top - tipRect.height - 8 : triggerRect.bottom + 8;
 
  // 3) 쓰기: 마지막에 몰아서
  tip.style.transform = `translate(${triggerRect.left}px, ${top}px)`;
  tip.classList.add('tooltip--visible');
}

flowchart TD
  subgraph REACT["React의 세계 (JavaScript)"]
    S[상태 변경] --> RR[리렌더링<br/>컴포넌트 함수 재실행] --> DIFF[이전 결과와 비교]
  end
 
  DIFF -- 바뀐 부분이 있으면 --> COMMIT[실제 DOM 변경]
 
  subgraph BROWSER["브라우저의 세계"]
    COMMIT --> RF["Layout (Reflow)"] --> RP["Paint (Repaint)"] --> CP[Composite]
  end
 
  DIFF -. 결과가 같으면 .-> NONE[DOM 변경 없음<br/>reflow도 없음]
 
  style REACT fill:#eff6ff,stroke:#3b82f6,color:#111
  style BROWSER fill:#fef3c7,stroke:#d97706,color:#111
  style NONE fill:#f1f5f9,stroke:#94a3b8,color:#111

// ❌ 리스트의 각 항목이 각자 측정하는 구조
function ListItem({ text }: { text: string }) {
  const ref = useRef<HTMLLIElement>(null);
 
  useLayoutEffect(() => {
    const height = ref.current!.offsetHeight; // 항목 수만큼 읽기
    ref.current!.style.setProperty('--h', `${height}px`); // 항목 수만큼 쓰기
  });
 
  return <li ref={ref}>{text}</li>;
}

// ✅ 부모가 읽기 전부 → 쓰기 전부로 정렬
function List({ items }: { items: string[] }) {
  const listRef = useRef<HTMLUListElement>(null);
 
  useLayoutEffect(() => {
    const nodes = listRef.current!.querySelectorAll<HTMLElement>('li');
 
    const heights = Array.from(nodes).map((n) => n.offsetHeight); // 읽기 전부
 
    nodes.forEach((n, i) => {
      n.style.setProperty('--h', `${heights[i]}px`); // 쓰기 전부
    });
  }, [items]);
 
  return (
    <ul ref={listRef}>
      {items.map((text) => (
        <li key={text}>{text}</li>
      ))}
    </ul>
  );
}

문제가 있을 때 보이는 모양
 
Main ─ | Event: scroll | Layout 💥 | Event: scroll | Layout 💥 | ...
        └ Layout 블록에 빨간 삼각형 + "Forced reflow is a likely
          performance bottleneck" 경고, 클릭하면 유발한 코드 위치 표시
 
개선 후 보이는 모양
 
Main ─ | Event: scroll |  ...  | rAF | Layout | Paint | Composite |
        └ 프레임당 Layout 1번 이하로 정리됨