[CS] 브라우저 렌더링 과정 이해하기

기술면접 준비하다보면 질문을 받게 되는 브라우저 렌더링 과정 쉽게 이해해보기!

🔎 근데 브라우저가 뭘까?

 

브라우저

브라우저는 다양한 웹사이트를 방문하고 웹 페이지를 표시하는 역할을 하는데

사용자가 주소를 입력하거나 링크를 클릭하면 브라우저는 해당 웹페이지의 내용을 가져와서 화면에 표시한다.

 

브라우저 렌더링 과정

브라우저 렌더링 과정이란, 쉽게 말해 웹페이지를 사용자가 볼 수 있는 형태로 변환하는 과정을 말한다.

먼저, 사용자가 주소를 입력하거나 링크를 클릭하면 브라우저는 해당 웹페이지 주소(URL)를 서버에 요청하면서

웹 페이지를 표시하기 위해 여러 단계의 렌더링 과정을 거치게 된다.

 

1. 파싱: 브라우저는 서버로부터 받은 HTML 문서를 파싱해서 DOM(Document Object Model)트리를 생성하고, 동시에 CSS 파싱해서 CSSOM 트리를 생성해서 각 요소의 스타일링을 결정한다.

2. 레이아웃: 브라우저는 레이아웃을 계산해서 각 요소의 크기와 위치를 결정하고, 이 정보를 바탕으로 화면에 요소들을 배치한다.

3. 그리기: 화면에 나타날 요소들의 색상, 텍스트, 이미지 등이 실제 픽셀로 변환되어 화면에 표시한다.

 

이러한 과정을 통해 브라우저는 최종적으로 웹페이지를 사용자가 볼 수 있는 형태로 변환하여 표시한다.