웹페이지가 브라우저에 렌더링

웹페이지가 브라우저에 렌더링되는 과정

파싱과 렌더링?

파싱(parsing)

:  프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽고, 실행하기 위해 텍스트의 문자열을 분해하고 구조를 생성하는 일련의 과정

렌더링(rendering)

:  HTML, CSS, JS로 작성된 문서를 파싱하여 브라우저에 사용자가 눈으로 볼 수 있도록 시각적으로 출력하는 것

 

브라우저의 렌더링 과정은 요청 및 응답, HTML과 CSS 파싱, 렌더 트리 생성, 레이아웃, 페인트, 그리고 JavaScript의 실행과 같은 여러 단계로 나뉜다.

 

요청 및 응답

브라우저는 웹 서버에 페이지 요청을 시작하고, 서버는 HTML, CSS, JS, 이미지 등의 자원을 반환한다.

HTML, CSS 파싱 -> DOM, CSSOM 생성

반환된 HTML은 파싱되어 DOM 트리로 변환된다. DOM은 웹 페이지의 구조적 표현이다.

반환된 CSS도 파싱되어 CSSOM 트리로 변환된다. 이 트리는 스타일 정보를 포함한다.

렌더 트리 생성

DOM과 CSSOM 트리는 합쳐져 실제 화면에 표시될 요소와 스타일 정보를 포함하는 렌더 트리를 생성한다.

레이아웃

렌더 트리를 바탕으로 브라우저는 각 요소의 크기와 위치를 결정합니다. 이 단계에서는 요소의 크기와 화면에서의 위치가 계산된다.

페인트

렌더 트리와 레이아웃 정보를 활용해 실제 픽셀로 변환되어 화면에 그려진다.

JavaScript

JavaScript는 파싱되고 실행되며, 필요에 따라 DOM을 조작하거나 스타일 변경 등의 작업을 수행한다.