10. 성능 지표

웹 렌더링 성능을 측정하는 데 사용되는 주요 지표입니다.

First Contentful Paint (FCP): 첫 번째 DOM 콘텐츠(텍스트, 이미지, SVG, 흰색이 아닌 <canvas>)가 렌더링되는 시점을 측정합니다. 사용자가 페이지가 로드되고 있음을 인지하는 중요한 시점입니다.
Largest Contentful Paint (LCP): 뷰포트 내에서 가장 큰 콘텐츠 요소(이미지 또는 텍스트 블록)가 표시되는 시점을 측정합니다. 페이지의 주요 콘텐츠가 로드되는 시점을 나타내므로 인지 로딩 속도에 매우 중요합니다.
Time to Interactive (TTI): 페이지가 완전히 상호작용 가능해지는 시점(즉, 메인 스레드가 사용자 입력에 안정적으로 응답할 수 있을 만큼 유휴 상태가 되는 시점)을 측정합니다.
Cumulative Layout Shift (CLS): 페이지의 전체 수명 주기 동안 발생하는 모든 예기치 않은 레이아웃 이동 점수의 합계를 측정합니다. 시각적 안정성을 나타내는 지표입니다. 낮은 CLS는 사용자 경험에 좋습니다.
Total Blocking Time (TBT): 로딩 단계에서 페이지가 사용자 입력에 응답하지 못하도록 차단된 총 시간을 측정합니다. TTI와의 상관관계가 높으며, 메인 스레드에 긴 작업이 얼마나 많았는지를 보여줍니다.
First Input Delay (FID): 사용자가 페이지와 처음 상호작용하는 시점(예: 링크 클릭, 버튼 탭)부터 브라우저가 해당 상호작용에 대한 이벤트 핸들러 처리를 실제로 시작할 수 있는 시점까지의 시간을 측정합니다. 페이지의 응답성을 나타내는 핵심 지표입니다.
Time to First Byte (TTFB): 사용자가 링크를 클릭한 시점부터 브라우저가 서버로부터 첫 번째 바이트 응답을 받는 시점까지의 시간입니다. 서버 응답 시간과 네트워크 레이턴시를 포함합니다.

11. 브라우저 내부 구조 및 스레드

브라우저가 다양한 작업을 어떻게 관리하는지 설명합니다.

브라우저 프로세스 (Browser Process): 브라우저의 UI(주소 표시줄, 뒤로/앞으로 버튼 등), 저장소, 네트워크 요청, 파일 접근 등을 관리하는 주 프로세스입니다.
렌더러 프로세스 (Renderer Process) (탭/오리진별): 웹페이지의 실제 렌더링을 담당하는 프로세스입니다. 보안 및 안정성을 위해 일반적으로 각 탭 또는 각 웹사이트 오리진마다 별도의 렌더러 프로세스가 할당됩니다.
- 메인 스레드 (Main Thread): 렌더러 프로세스 내의 핵심 스레드입니다.
  - HTML 파싱, DOM, CSSOM 구축.
  - 렌더 트리 구성, 레이아웃 계산, 페인트.
  - JavaScript 실행 (웹 워커 제외).
  - 이벤트 핸들링 (사용자 입력, 네트워크 이벤트 등).
  - 이 스레드가 블로킹되면 페이지가 멈추거나 응답하지 않게 됩니다.
- 합성기 스레드 (Compositor Thread): 메인 스레드에서 페인트된 레이어들을 받아와 합성하고 GPU에 전송하는 역할을 합니다.
  - 메인 스레드의 작업과 독립적으로 실행될 수 있어, 메인 스레드가 바쁘더라도 부드러운 스크롤이나 애니메이션을 가능하게 합니다.
  - 주로 transform, opacity와 같이 레이아웃이나 페인트를 유발하지 않는 속성 변경 애니메이션을 처리합니다.
- 래스터 스레드 (Raster Threads):<