브라우저 Reflow와 Repaint (2): 불필요한 렌더링 비용을 줄이는 방법

flowchart TD
  GOAL[Reflow / Repaint 비용 줄이기]
 
  GOAL --> A["① 횟수 줄이기<br/>같은 일을 덜 하게"]
  GOAL --> B["② 범위 좁히기<br/>다시 계산할 영역을 작게"]
  GOAL --> C["③ 싼 단계로 옮기기<br/>Layout 대신 Composite"]
 
  A --> A1[읽기/쓰기 분리]
  A --> A2[스타일 변경 묶기]
  A --> A3[DOM 변경 일괄 처리]
 
  B --> B1[문서 흐름에서 분리]
  B --> B2[contain / content-visibility]
  B --> B3[크기를 미리 약속]
 
  C --> C1[transform / opacity]
  C --> C2[will-change]

// ❌ Before: 읽기와 쓰기가 순회마다 번갈아 나온다
const items = document.querySelectorAll<HTMLElement>('.item');
 
items.forEach((item) => {
  const height = item.offsetHeight; // 읽기 → 강제 레이아웃 계산
  item.style.height = `${height + 10}px`; // 쓰기 → 다시 dirty
});

// ✅ After: 읽기 전부 → 쓰기 전부
const items = document.querySelectorAll<HTMLElement>('.item');
 
// 1단계: 읽기만 (레이아웃은 이미 최신이므로 계산 1번 이하)
const heights = Array.from(items).map((item) => item.offsetHeight);
 
// 2단계: 쓰기만 (dirty 표시만 쌓이고 계산은 다음 프레임에 1번)
items.forEach((item, i) => {
  item.style.height = `${heights[i] + 10}px`;
});

❌ Before (항목 200개 기준)
읽기→계산💥→쓰기 | 읽기→계산💥→쓰기 | ... × 200  = Layout 200번
 
✅ After
읽기 읽기 읽기 ... ×200 | 쓰기 쓰기 쓰기 ... ×200  = Layout 1번

// ❌ Before: 변경이 흩어져 있어 사이에 읽기가 끼기 쉽다
el.style.width = '200px';
el.style.height = '100px';
el.style.borderRadius = '8px';
el.style.backgroundColor = 'tomato';

// ✅ After: 최종 상태를 클래스로 선언하고 토글만 한다
el.classList.add('card--expanded');

.card--expanded {
  width: 200px;
  height: 100px;
  border-radius: 8px;
  background-color: tomato;
}

// ❌ Before: 문서에 이미 붙어 있는 노드에 하나씩 추가
const list = document.getElementById('list')!;
 
data.forEach((item) => {
  const li = document.createElement('li');
  li.textContent = item.name;
  list.appendChild(li); // 매번 라이브 DOM 변경
});

// ✅ After: 문서 밖에서 다 만들고 한 번에 붙인다
const list = document.getElementById('list')!;
const fragment = document.createDocumentFragment();
 
data.forEach((item) => {
  const li = document.createElement('li');
  li.textContent = item.name;
  fragment.appendChild(li); // 문서 밖이라 렌더링과 무관
});
 
list.appendChild(fragment); // 라이브 DOM 변경은 이 한 번

flowchart LR
  subgraph OFF["문서 밖 (렌더링 대상 아님)"]
    F[DocumentFragment] --> L1[li]
    F --> L2[li]
    F --> L3[li ...]
  end
 
  OFF -- "appendChild 1번" --> DOM[라이브 DOM]
 
  style OFF fill:#f1f5f9,stroke:#94a3b8,color:#111
  style DOM fill:#bbf7d0,stroke:#16a34a,color:#111

let ticking = false;
 
window.addEventListener('scroll', () => {
  if (ticking) return;
  ticking = true;
 
  requestAnimationFrame(() => {
    updateHeader(window.scrollY); // 프레임당 1번만 실행
    ticking = false;
  });
});

/* 자주 움직이는 요소는 흐름에서 분리 */
.floating-widget {
  position: fixed; /* 또는 absolute */
  top: 16px;
  right: 16px;
}

flowchart TD
  subgraph FLOW["문서 흐름 (서로 영향을 주고받음)"]
    HEADER[header] --- MAIN[main] --- FOOTER[footer]
  end
 
  WIDGET["position: fixed 위젯<br/>크기가 바뀌어도 주변에 전파 없음"]
 
  style WIDGET fill:#bbf7d0,stroke:#16a34a,color:#111
  style FLOW fill:#f1f5f9,stroke:#94a3b8,color:#111

.card {
  /* 내부 레이아웃·페인트 변경을 카드 안에 가둔다 */
  contain: layout paint;
}

.long-section {
  content-visibility: auto;
  contain-intrinsic-size: auto 480px; /* 건너뛴 동안 차지할 예상 높이 */
}

<!-- ❌ 이미지가 로딩되는 순간 아래 콘텐츠 전체가 밀린다 -->
<img src="/banner.jpg" alt="배너" />
 
<!-- ✅ 자리를 미리 확보해서 로딩 후에도 배치가 그대로다 -->
<img src="/banner.jpg" alt="배너" width="1200" height="400" />

/* 반응형이라면 비율로 자리를 약속한다 */
.thumbnail {
  aspect-ratio: 3 / 1;
  width: 100%;
}

/* ❌ Before: 매 프레임 Layout → Paint → Composite */
.panel {
  position: relative;
  left: 0;
  transition: left 0.3s ease;
}
.panel.open {
  left: 240px;
}

/* ✅ After: 매 프레임 Composite만 */
.panel {
  transform: translateX(0);
  transition: transform 0.3s ease;
}
.panel.open {
  transform: translateX(240px);
}

/* 곧 애니메이션할 요소에만 제한적으로 */
.drawer {
  will-change: transform;
}

/* ❌ 이러지 말 것: 모든 요소를 레이어 후보로 만든다 */
* {
  will-change: transform, opacity;
}