[면접] 브라우저 렌더링 원리에 대해서 설명해보세요.

 

 

0. 개요

브라우저 렌더링 원리는 대충은 알고있지만 설명하라고 한다면 제대로 설명을 못 할 것 같습니다. 이번에 블로그를 정리를 하면서 제대로 답변을 할 수 있도록 해봅시다!

 

1. 브라우저(Browser)란?

브라우저는 우리가 보고 싶은 사이트에 들어가면 url를 통해 서버에 요청하고 서버로 부터 받은 응답(HTML,CSS,JavaScript, 이미지 등..) 을 브라우저에 표시하는 것입니다.

 

가장 대표적인 웹 브라우저로는 크롬, 사파리, 파이어폭스가 있습니다.

 

2. 브라우저 렌더링의 단계

브라우저 렌더링은 HTML, CSS, JavaScript 등의 웹 페이지 자원을 브라우저가 화면에 그리는 과정을 말합니다. 브라우저 렌더링 원리와 순서는 크게 다음과 같은 단계로 구성됩니다.

2.1 문서 파싱

• HTML 파싱

브라우저는 HTML 문서를 파싱하여 DOM(Document Object Model) 트리를 구성합니다.

 

 

• CSS 파싱

CSS 파일과 스타일 요소를 파싱하여 CSSOM(CSS Object Model) 트리를 구성합니다.

 

2.2 렌더 트리(Render Tree) 생성

• DOM과 CSSOM의 결합

DOM 트리와 CSSOM 트리는 결합하여 렌더 트리를 형성합니다. 렌더 트리는 실제 페이지를 렌더링하는 데 필요한 모든 노드와 스타일 정보를 포함합니다.

 

 

display: none 속성이 설정된 노드는 화면에 어떠한 공간도 차지하지 않는다.

따라서 Render Tree를 만드는 과정에서 제외된다.

 

visibility: invisible은 display:none과 비슷하게 동작하지만, 공간은 차지하고 요소가 보이지 않게만 하기 때문에 Render Tree에 포함된다.

 

2.3 레이아웃(Layout)

• 레이아웃 계산

각 노드의 정확한 위치와 크기를 계산합니다. 이 과정을 레이아웃 또는 리플로우라고 합니다.

생성된 Render Tree 노드들이 가지고 있는 스타일과 속성에 따라서 브라우저 화면의 어느 위치에 어느 크기로 출력될지 계산하는 단계입니다.

Layout 단계를 통해 %, vh, vw와 같이 상대적인 위치, 크기 속성은 실제 화면에 그려지는 pixel 단위로 변환됩니다.

 

2.4 페인팅(Paint)

• 노드 그리기

계산된 레이아웃에 따라 노드를 실제 화면에 그립니다.

이전 단계에서 이미 요소들의 위치와 크기, 스타일 계산이 완료된 Render Tree를 이용해 실제 픽셀값을 채워넣습니다.

이 때 텍스트, 색, 이미지, 그림자 효과 등이 모두 처리되어 그려집니다.

 

2.5 페인팅 이후(Reflow, Repaint)

위에서 언급된 렌더링 과정을 거친 뒤에 최종적으로 페이지가 그려진다고 해서 렌더링 과정이 다 끝난 것이 아닙니다.

어떠한 액션이나 이벤트에 따라 html 요소의 크기나 위치 등 레이아웃 수치를 수정하면 그에 영향을 받는 자식 노드나 부모 노드들을 포함하여 layout 과정을 다시 수행합니다.

이렇게 되면 Render Tree와 각 요소들의 크기와 위치를 다시 계산하게 되는데 이 과정을 Reflow 라고 합니다.

그후에 Repaint 과정을 통해서 다시 화면에 그리게 됩니다.

 

Reflow와 Repaint를 줄이기 위한 방법

• visibility: invisible 보다 display:none; 사용하기

display:none은 레이아웃 공간을 차지하지 않습니다.

• transform, opacitiy 사용하기

Reflow Repaint가 일어나지 않는 transform, opacitiy와 같은 속성도 있습니다.

따라서 left, right, width, height 보다 transform을, visibility/display 보다 opacitiy를 사용하는 것이 성능 개선에 도움이 됩니다.

 

3. 면접 답변

브라우저 렌더링은 HTML, CSS, JavaScript 등의 웹 페이지 자원을 브라우저가 화면에 그리는 과정을 말합니다. 브라우저 렌더링 과정은 HTML문서 파싱하여 DOM트리를 형성하고 CSS문서를 파싱해서 CSSOM트리를 형성하고 DOM트리와 CSSOM트리를 결합하여 렌더트리를 형성합니다. 브라우저는 렌더 트리를 이용해서 각 요소의 크기 위치를 계산하는 레이아웃을 거쳐 화면에 요소를 그리는 페인팅 과정을 거치게 됩니다.