브라우저의 렌더링 과정을 Critical Rendering Path 관점에서 설명해주세요.

// 브라우저가 렌더링을 차단하는 이유:
// CSS는 캐스케이딩 규칙에 의해 나중 스타일이 앞 스타일을 덮어쓸 수 있음
// CSSOM이 완전히 구성되어야 최종 스타일을 알 수 있음
// 불완전한 CSSOM으로 렌더링하면 화면이 깜빡이는 FOUC(Flash of Unstyled Content) 발생

// FOUC 방지 - CSS가 로드될 때까지 렌더링 차단
// <link rel="stylesheet"> 는 항상 렌더링 차단

// Layout을 유발하는 CSS 속성들 (비용이 큰 작업)
// width, height, margin, padding, border
// top, left, right, bottom (position)
// font-size, line-height
// display, float

// JavaScript에서 Layout을 강제 발생시키는 작업 (피해야 함)
const element = document.getElementById('box')

// 이런 속성 읽기는 최신 Layout 결과를 요구함
const width = element.offsetWidth
const height = element.offsetHeight
const rect = element.getBoundingClientRect()

// ❌ Layout Thrashing (성능 저하)
for (let i = 0; i < 100; i++) {
  element.style.width = (element.offsetWidth + 1) + 'px' // 매 반복마다 Layout
}

// ✅ Layout Thrashing 방지 - 읽기와 쓰기를 분리
const currentWidth = element.offsetWidth // 한 번에 읽기
for (let i = 0; i < 100; i++) {
  element.style.width = (currentWidth + i) + 'px' // 쓰기만
}

// Paint를 유발하는 CSS 속성들 (Layout보다는 저렴)
// color, background-color, background-image
// border-color, border-radius
// box-shadow, text-shadow
// outline

// GPU 가속을 활용하는 속성들 (Paint 없이 Compositing만 발생 - 가장 빠름)
// transform: translate(), scale(), rotate()
// opacity
// will-change: transform (레이어 분리 힌트)

// ✅ 애니메이션 최적화 - transform 사용 (Paint 없이 Compositing만)
.animated-element {
  transform: translateX(0);
  transition: transform 0.3s ease;
}
.animated-element:hover {
  transform: translateX(100px); /* Reflow, Repaint 없이 Compositing만 */
}

/* ❌ 느린 애니메이션 - left 사용 (Reflow + Repaint 발생) */
.slow-element {
  left: 0;
  transition: left 0.3s ease;
}
.slow-element:hover {
  left: 100px; /* Layout + Paint 재실행 */
}

// ❌ 여러 번 DOM 조작 (매번 Reflow 유발)
const el = document.getElementById('box')
el.style.width = '100px'   // Reflow
el.style.height = '100px'  // Reflow
el.style.margin = '10px'   // Reflow

// ✅ 한 번에 스타일 적용
el.style.cssText = 'width: 100px; height: 100px; margin: 10px;'

// ✅ 또는 클래스 변경으로 한 번에 처리
el.classList.add('sized-box')

// ✅ DocumentFragment 사용 - DOM 조작을 메모리에서 처리
const fragment = document.createDocumentFragment()
for (let i = 0; i < 100; i++) {
  const li = document.createElement('li')
  li.textContent = `아이템 ${i}`
  fragment.appendChild(li) // 메모리에서만 조작 (Reflow 없음)
}
document.getElementById('list').appendChild(fragment) // 한 번만 DOM에 추가

// ✅ 요소를 숨기고 조작한 후 다시 표시
const el = document.getElementById('complex-element')
el.style.display = 'none'  // Reflow (한 번)
// ... 많은 DOM 조작 ...
el.style.display = 'block' // Reflow (한 번)
// 중간 조작들은 화면에 반영 안 됨