브라우저 렌더링이 뭘까요?

열심히하시는개발자·2023년 2월 1일

1. 브라우저 렌더링 or Critical Rendering Path란?

위의 그림과 같이 브라우저가 서버로부터 HTML 응답을 받아 화면을 그리기 위해 실행하는 과정이다.

2. 브라우저의 기본 구조

브라우저의 구성 요소는 위의 그림과 같은데 하나씩 뜯어보자

사용자 인터페이스 - 주소 표시줄, 이전/다음 버튼 등 요청한 페이지를 보여주는 창을 제외한 나머지 부분

브라우저 엔진 - 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어

렌더링 엔진 - HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시

통신 - HTTP 요청과 같은 네트워크 호출에 사용

자바스크립트 해석기 - JS 코드를 해석하고 실행

UI 백엔드 - 콤보 박스와 창 같은 기본적인 장치를 그리고 플랫폼에서 명시하지 않은 일반적인 인터페이스

자료 저장소 - 모든 종류의 자원을 하드 디스크에 저장할 필요가 있어 HTML5 명세에는 브라우저가 지원하는 웹 데이터 베이스가 정의

특히 크롬은 대부분의 브라우저와 달리 각 탭마다 별도의 렌더링 엔진 인스턴스를 유지한다고 한다.

브라우저의 기본 구조 중에 집중적으로 다루어야 할 부분은 렌더링 엔진이라 그 부분에 대해서 좀 더 알아보자!

2-1 렌더링 엔진

렌더링 엔진의 역활은 요청 받은 내용을 브라우저 화면에 표시하는 일이라고 한다. 그래서 HTML 및 XML 문서와 이미지를 표시 할 수 있다. 또한 우리가 자주 사용하는 크롬의 경우는 웹킷(Webkit)이라는 렌더링 엔진을 사용한다고 한다!

2-2 렌더링 엔진의 동작 과정

렌더링 엔진은 요청한 문서의 내용을 얻는 것으로 시작하여 위 그림과 같은 순서로 동작한다.

HTML문서와 CSS를 파싱하여 각각 DOM Tree와 CSSOM Tree로 변환한다.
DOM 과 CSSOM으로 Render Tree를 구축한다.
Render Tree 생성이 끝나면 각 노드가 화면의 정확한 위치와 크기를 계산한다.
계산된 값을 이용해 각 노드를 화면상의 실제 픽셀로 변환하고, 레이어를 만든다.
레이어를 합성하여 실제 화면에 나타낸다.

참고 사항

렌더링 엔진은 내용을 표시하는데 모든 HTML을 파싱할 때까지 기다리지 않고 배치와 그리기 과정을 시작한다. 네트워크로부터 나머지 내용이 전송되기를 기다리는 동시에 받은 내용의 일부를 먼저 화면에 표시한다.
파싱 : 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것을 의미한다.

3. 브라우저 렌더링 전체 과정

3-1. 요청과 응답

브라우저에 있는 주소창에 URL을 입력하면 URL의 호스트 이름이 DNS를 통해 진짜 주소인 IP주소로 변환되고, 이 IP 주소를 갖는 서버에게 요청을 한다.

3-2. HTML, CSS 파싱

브라우저 렌더링 엔진은 서버로부터 받아온 HTML과 CSS를 파싱해 각각 DOM, CSSOM로 변환시키고 이 둘을 결합해 아래에 그림과 같이 Render Tree를 생성한다.

3-3. JS 파싱

렌더링 엔진은 HTML 파일을 파싱하며 DOM을 생성하다가 JS코드를 불러오는 Script 태그를 만나면 파싱을 멈추고 서버에 JS 리소스를 요청하고 받아온 JS 파일을 JS엔진이 파싱하게 된다.

3-4. Layout(레이아웃)

Render Tree에는 각 노드들의 위치나 크기와 관련된 정보들이 들어있어 화면에 어떤 위치에 배치해야할지 몰라 HTML 요소의 위치와 크기를 계산하게 된다. HTML 요소의 형상(너비, 높이, 위치)가 변경될 때마다 브라우저는 레이아웃 단계를 실행한다.

3-5. Paint(그리기)

레이아웃 단계에서 계산된 값을 Render Tree의 각 Node를 통해 실제 화면에 전달하고, 여러개의 Layer로 만들어 그려지게 된다. 만약 하나의 Layer로 그려지게 된다면 paint 하는 과정이 발생했을 때, 모든 Layer를 다시 그려야하기 때문에 렌더링 성능상 좋지않다.

3-6. Composite(합성)

Paint단계 에서 만들어진 여러개의 Layer들을 우리가 실제 보는 화면처럼 합성해준다.

4. Reflow / Repaint

브라우저 렌더링에 있어 Reflow와 Repaint 과정이 많으면 퍼포먼스 저하를 일으킨다고 하는데, 어떤 부분들이 있는지 알아보자

4-1 Reflow 일으키는 속성

윈도우 리사이징

폰트의 변화(font-family, font-size, font-weight)

hover와 같은 CSS Pseudo Class

position, width, height, top, bottom, left, right, margin, padding 등등

4-2 Repaint만 일으키는 속성

background(image, position, repeat, size) 속성

ountline 속성

border 속성

4-3 No Reflow / Repaint !?

우리가 애니메이션을 구현할 때 많이 쓰는 transform 속성은 Reflow, Repaint가 일어나지 않는다.
그렇기 때문에 애니메이션 같은 인터렉티브한 UI를 만들 때는 left, top 쓰기보단 transform을 사용하는게 좋다.

4-4 그렇다면 어떤 속성을 써야하는걸까?

사실 위의 정의되어 있는 속성들은 UI를 구현할 때 가장 많이 쓰이는 속성들이라 사용이 불가피하다. 또한 Reflow가 일어나는 속성의 사용은 Repaint보다 더 많은 퍼포먼스 저하가 생긴다고 하니 UI를 구현 할 떄 위의 속성들을 생각하면서 작업을 해야할 것 같다.