브라우저는 HTML을 받아서 화면에 어떻게 그리나요?

HTML 수신
    │
    ▼
1. DOM 생성       HTML 파싱 → 노드 트리
2. CSSOM 생성     CSS 파싱 → 스타일 트리
    │
    ▼
3. Render Tree    DOM + CSSOM 결합 (display:none 제외)
    │
    ▼
4. Layout         각 노드의 크기, 위치 계산 (Reflow)
    │
    ▼
5. Paint          색상, 배경, 텍스트 등 픽셀 그리기
    │
    ▼
6. Composite      레이어를 합쳐 최종 화면 출력

// Layout Thrashing — 루프 안에서 스타일 읽기와 쓰기를 반복하는 경우
// 읽기(offsetWidth)마다 브라우저가 강제로 Layout을 재계산합니다.

const items = document.querySelectorAll('.item');

items.forEach((item) => {
  const width = item.offsetWidth;          // Layout 강제 실행 (읽기)
  item.style.width = width * 1.2 + 'px';  // Layout 무효화 (쓰기)
  // 다음 반복의 읽기가 다시 Layout을 강제로 실행합니다.
});
// items가 100개면 Layout이 100번 실행됩니다.

/* top/left로 애니메이션 — Layout → Paint → Composite 전 과정 재실행 */

.box {
  position: absolute;
  top: 0;
  transition: top 0.3s ease; /* top 변경은 Layout을 유발합니다. */
}
.box.moved {
  top: 200px;
}

// 읽기를 먼저 모아두고, 쓰기를 한 번에 처리합니다.
// Layout은 한 번만 실행됩니다.

const items = document.querySelectorAll('.item');

// 1단계: 읽기 일괄 처리
const widths = Array.from(items).map((item) => item.offsetWidth);

// 2단계: 쓰기 일괄 처리
items.forEach((item, i) => {
  item.style.width = widths[i] * 1.2 + 'px';
});

// requestAnimationFrame으로 렌더링 타이밍에 맞춰 DOM 변경
// 브라우저가 다음 프레임을 그리기 직전에 실행되어 불필요한 재계산을 줄입니다.

function animate() {
  requestAnimationFrame(() => {
    element.style.transform = `translateX(${x}px)`;
    x += 2;
    if (x < 300) animate();
  });
}
animate();

/* transform으로 애니메이션 — Composite 단계만 실행, GPU 처리 */

.box {
  position: absolute;
  transform: translateY(0);
  transition: transform 0.3s ease; /* Layout, Paint 없이 GPU에서 처리 */
}
.box.moved {
  transform: translateY(200px);
}

/* will-change로 레이어 분리 예고
   브라우저가 미리 GPU 레이어를 만들어 애니메이션 시 Composite만 실행합니다.
   남용하면 메모리 사용량이 늘어나므로 실제로 애니메이션이 있는 요소에만 사용합니다. */

.animated-card {
  will-change: transform;
}

// IntersectionObserver — scroll 이벤트 대신 사용
// scroll 이벤트는 스크롤마다 Layout을 유발할 수 있습니다.
// IntersectionObserver는 요소가 뷰포트에 진입/이탈할 때만 콜백을 실행합니다.

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
    }
  });
});

document.querySelectorAll('.fade-in').forEach((el) => observer.observe(el));