0. 들어가기 전에
면접에 갔을 때 받은 질문중에 '브라우저 렌더링 과정에 대해서 설명해 주실 수 있나요?'가 있었다. 나는 도메인을 입력하면 DNS서버로 부터 IP를 받아오고 받아온 IP로 DOM 트리를 만들고 그 후에 CSSOM 트리를 만들어 렌더 트리를 구성해 페인팅한다는 식으로 답변했었는데 조금 자세하게 설명해 줄 수 있냐는 꼬리 질문에 말문이 막히고 말았다. 그래서 오늘은 브라우저 렌더링 과정에 대해 자세하게 알아보려고 한다.
1. Browser란?
먼저 브라우저란 무엇인가? MDN에서 검색해 본 브라우저는 '웹에서 페이지를 찾아서 보여주고, 사용자가 하이퍼링크를 통해 다른 페이지로 이동 할 수 있도록 하는 프로그램'이라고 하고 있다. 우리가 사용하는 Chrome이나 Safari, 고인이 되버린 IE 등이 대표적인 예시라고 할 수 있다.
2. Browser의 구성요소
브라우저는 아래와 같은 구성요소로 이루어져 있다.
1. UI
브라우저를 켰을 때 바로 확인할 수 있는 주소표시줄과 새로고침, 뒤로가기 등의 버튼들, 요청한 페이지를 보여주는 창외에 사용자가 컨트롤 할 수 있는 부분을 말한다.
2. Browser Engine
사용자가 주소창에 입력한 URI 값을 렌더링 엔진에게 전달해주는 역할 및 각종 버튼들을 눌렀을 때 그 명령 또한 렌더링 엔진에게 전달 하는 역할을 한다.
4. Rendering Engine
사용자가 URI를 입력했을 때, URI에 해당하는 데이터를 네트워크 레이어에 전달해 주고, 응답으로 받은 리소스 또는 스토리지에 캐싱된 리소스를 가져와 인터프리터, UI 백엔드에 전달 해주며 HTML, CSS 코드를 파싱해서 렌더 트리를 구성해 전달해주는 총괄적인 역할을 한다.
5. Network(Network Layer)
렌더링 엔진으로부터 HTTP 요청을 받아서, 서버에게 요청하고 응답 리소스를 받아 렌더링 엔진에게 돌려준다.
6. Interpreter(JS Interpreter)
렌더링 엔진으로부터 받아온 리소스 중에서 자바스크립트를 파싱하는 역할을 한다.
7. UI Backend
렌더링 엔진에서 생성된 렌더 트리를 브라우저에 그리는 역할을 한다.
3. Browser Rendering Process
브라우저의 렌더링 과정은 크게 Parsing → Style → Layout → Paint → Composite 순으로 진행된다.
1. Parsing
브라우저가 받아온 HTML 파일을 해석하여 DOM Tree를 구성하는 단꼐이며 파싱 중에 HTML 파일안에 CSS가 포함되어 있다면 CSSOM Tree 구성도 함께 진행한다.
2. Style
파싱 단계에서 생성된 DOM tree와 CSSOM Tree를 매칭시켜서 Render Tree를 구성하는 단계이다. Render Tree는 실제로 화면에 그려질 Tree이다.
4. Layout
Render Tree를 화면에 어떻게 배치할 것인지 노드에 정확한 위치와 크기를 계산하는 단꼐이다. 루트부터 노드를 순회하면서 노드의 정확한 크기와 위치를 계산하고 Render Tree에 반영한다.(만약 크기가 %라면 현 단계에서 %값을 픽셀 단위로 변환한다.)
5. Paint
레이아웃 단계에서 계산된 값을 이용해 Render Tree의 각 노드를 화면상에 실제 픽셀로 변환하는 단계이다. 이 때 픽셀로 변환된 결과는 하나의 레이어가 아니라 여러 개의 레이어로 관리된다. (스타일이 복잡할수록 페인트에 걸리는 시간이 늘어난다.)
6. Composite
페인트 단계에서 생성된 레이어를 합성하여 실제 화면에 나타내는 단계이다.
5. 참조
