브라우저의 렌더링

1. 브라우저라는 가상 머신의 가동

우리가 주소창에 y0ung.dev를 치는 순간, 브라우저 내부에서 일어나는 거대한 프로세스에 대한 예고.
엔터 한 번에 시작되는 프로세스

2. Network Stage: 데이터가 오기까지 (DNS & TCP)

DNS 조회
y0ung.dev라는 나의 도메인을 실제 IP 주소로 바꾸는 과정을 거친다.
(전화번호부 찾기와 비슷하게 하나하나 조회한다.)

TCP/TLS Handshake
서버와 브라우저가 "데이터 보내도 돼?"라며 신뢰를 쌓는 과정.

💡 성능 최적화 포인트:

• DNS Prefetch: 미리 DNS를 찾아놓기.
• CDN 사용: 물리적 거리를 줄여서 왕복 시간(RTT) 단축하기.

3. Parsing Stage: 설계도 해석 (HTML to DOM/CSSOM)

DOM 트리 생성
HTML을 하나하나 쪼개서 나무 구조로 만들기.

CSSOM 트리 생성
CSS를 해석해서 스타일 지도 만들기.

💡 성능 최적화 포인트:

• HTML 최적화
  태그 중첩 줄이기.
• Critical CSS
  당장 화면에 보일 CSS만 따로 빼서 빠르게 로드하기(Link 태그 전략).

4. Render Tree Stage: 진짜 그릴 것만 골라내기

DOM과 CSSOM이 합쳐져서 '**화면에 보일 요소'**만 남기는 과정.
(display: none은 여기서 탈락! 정말 그려질 요소들만!)

5. Layout & Paint: 화면에 뿌리기

Layout (Reflow)
각 요소가 어디에, 어떤 크기로 위치할지 계산. (기하학적 계산)

• Paint
  위치가 정해진 요소에 색을 입히고 그림자를 넣는 과정.

💡 성능 최적화 포인트:

• Reflow 방지: width, height를 바꾸는 것보다 transform을 사용해 레이아웃 계산을 피하기. (GPU 가속 활용)

6. 최적화된 코드가 사용자 경험을 만든다

이 모든 과정이 1초 안에 끝나는 마법.
개발자가 각 단계를 이해해야 하는 이유이다.(성능은 곧 돈이다!).