웹 사이트는 어떻게 그려질까?

웹 브라우저의 렌더링 과정

1. URL 입력
   
   • 사용자가 웹 브라우저에 URL을 입력한다.
     
   • 브라우저는 해당 서버에 HTTP 요청을 보낸다.
     
   • 서버는 HTML 문서를 반환한다.
     
     
2. HTML 파싱 & CSS 파싱
   
   • HTML 파서를 통해 DOM 트리¹를 구성한다.
     
   • CSS² 파서를 통해 CSSOM 트리를 구성한다.
     
     
3. 렌더 트리 구성
   
   • DOM 트리와 CSSOM 트리를 합쳐 렌더 트리를 구성한다.
     
   • 렌더 트리는 페이지를 그리는 데 필요한 모든 요소와 스타일 정보를 포함한다.
     
   • 실제 화면에 표시되지 않는 요소는 포함되지 않는다(Ex. display: none 속성을 가진 요소).
     
     
4. 레이아웃 처리
   
   • 렌더 트리를 기반으로 각 요소의 정확한 위치와 크기를 계산한다.
     
   • 각 요소는 상대적인 위치를 가진다.
     
     
5. 렌더 레이어 생성
   
   • 다른 요소들과 독립적으로 렌더링되어야 하는 요소(Ex. CSS의 position: fixed 속성이나 opacity 속성을 가진 요소)를 위한 별도의 레이어를 생성한다.
     
   • 성능 최적화와 복잡한 시각적 효과 구현에 유리하다.
     
     
6. 페인팅
   
   • 픽셀로 화면에 그린다.
     
   • 텍스트, 색상, 이미지 등이 화면에 표시된다.
     
     
7. 합성
   
   • 렌더 레이어를 합성하여 최종 이미지를 형성한다.
     
     

¹Document Object Model 트리. HTML 문서의 구조를 표한한다.
²Cascading Style Sheets. 스타일 정보를 담고 있다.