[CS / Web] 브라우저 렌더링 과정

브라우저

브라우저는 우리가 흔히 인터넷에 접속할 때 사용하는 사이트 Choreme, Safari, Firefox, Internet Explorer 등을 말한다.

MDN 웹문서에서 웹 브라우저 또는 브라우저는 웹에서 페이지를 찾아서 보여주고, 사용자가 하이퍼링크를 통해 다른 페이지로 이동할 수 있도록 하는 프로그램이라고 설명를 하고 있다.

브라우저의 주요 기능

브라우저의 주요기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것이다.

렌더링

HTML, CSS, JavaScript 등 개발자가 작성한 문서를 브라우저에서 출력하는 과정을 말한다.

브라우저 렌더링 동작 과정

1. HTML 파일과 CSS 파일의 파싱해서 각각의 Tree를 생성한다. (Parsing)
2. 두 Tree를 결합하여 Render Tree를 만든다. (Style)
3. Render Tree에서 각 노드의 위치와 크기를 계산한다. (Layout)
4. 계산된 값을 이용해 각 노드를 화면상의 실제 픽셀로 변환하고, 레이어를 만든다. (Paint)
5. 레이어를 합성하여 실제 화면에 나타낸다. (Composite)

Parsing

브라우저가 페이지를 렌더링하려면 먼저 받아온 HTML 파일을 해석해서 출력 해야한다. Parsing 단계는 HTML 파일을 해석하여 DOM(Document Object Model) Tree를 구성하는 단계이다.

파싱을 하는 HTML 파일안에 CSS 파일도 포함되어 있다면 CSSOM(CSS Object Model)을 함께 진행한다.

DOM(Document Object Model)

CSSOM(CSS Object Model)

Style

Style 단계는 Parsing 단계에서 생성된 DOM Tree와 CSSOM Tree를 매칭시켜서 Render Tree를 구성한다. Render Tree는 실제로 화면에 그려질 Tree이며 실제 화면에 표현되는 노드(요소)들로만 구성 된다.

예를 들면 display : none 속성이 설정된 노드는 어떤 공간도 차지하지 않아 Render Tree를 만드는 과정에서 제외된다.
visibility : invisible, visibility: hidden 속성은 비슷하게 동작하지만 , 공간은 차지하고 요소가 보이지 않게만 하기 때문에 Render Tree에 포함된다.

Layout

Layout 단계에서는 Render Tree를 화면에 어떻게 배치해야 할 것인지 뷰포트(Viewport) 내에서 각 노드들의 정확한 위치와 크기를 계산한다.

즉 , 브라우저 화면의 어떤 위치에 어떤 크기로 출력될지 계산 하는 단계라고 할 수 있다.

Paint

Paint 단계에서는 Layout 단계에서 계산된 값을 이용해 Render Tree의 각 노드를 화면상의 실제 픽셀로 변환한다.

이때 픽셀로 변환된 결과는 하나의 레이어가 아니라 여러 개의 레이어로 관리된다.

Composite

Composite 단계에서는 Paint 단계에서 생성된 레이어를 합성하여 실제 사용자 화면에서 웹 페이지가 나타낸다.

정리

1. 브라우저 주소창에 www.naver.com을 검색한다.
2. 네이버 서버를 찾아간다.
3. *DNS가 연결해 줄 곳을 찾아 준다.
4. 주소에 https가 붙어있다면 https 방식으로 통신을 한다.
5. 서버에서 HTML 파일을 클라이언트로 보낸다.
6. HTML 파일 파싱 및 DOM Tree 생성한다.
7. link 태그를 만나 css 파싱 및 CSSOM 트리 생성한다.
8. DOM , CSSOM 합쳐 Render Tree 생성한다. (JavaScript를 만나면? HTML파서는 JS 코드를 실행하기 위해 파싱 중단)
9. 제어권한을 자바스크립트 엔진에게 넘기고, 자바스크립트 코드 또는 파일을 로드해서 파싱하고 실행한다.