브라우저 동작 과정 원리&정리

juyeong-s·2023년 3월 3일

DOM frontend web 렌더링엔진 브라우저

브라우저

목록 보기

1/2

브라우저 기본 구조

브라우저의 주요 구성 요소는 다음과 같다.

사용자 인터페이스: 주소 표시줄, 이전/다음 버튼, 북마크 등. 요청한 페이지를 보여주는 화면을 제외한 나머지 모든 부분을 말함
브라우저 엔진: 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어
렌더링 엔진: 요청한 콘텐츠를 표시. 예를 들어 HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시함
통신: HTTP 요청과 같은 네트워크 호출에 사용됨. 이것은 플랫폼 독립적인 인터페이스이고 각 플랫폼 하부에서 실행됨
UI 백엔드: 렌더 트리를 브라우저에 그림
자바스크립트 해석기: 자바스크립트 코드를 해석하고 실행
자료 저장소: 쿠키와 같은 모든 종류의 자원을 저장

크롬은 대부분의 브라우저와 달리 각 탭마다 별도의 렌더링 엔진 인스턴스를 유지한다. 각 탭은 독립된 프로세스로 처리된다.

렌더링 엔진

렌더링 엔진은 요청받은 내용을 브라우저 화면에 표시하는 일을 한다.

렌더링 엔진들

파이어폭스는 모질라에서 만든 게코(Gecko)엔진을 사용하고, 크롬은 웹킷(Webkit) 엔진을 사용한다.

동작과정

다음은 렌더링 엔진의 기본적인 동작 과정이다.

렌더링 엔진은 HTML 문서를 파싱하고 각 태그들을 DOM 노드로 변환한다. 그 다음 CSS 파일의 스타일 요소도 파싱한다. 파싱된 HTML과 스타일 정보는 "렌더 트리" 라는 또 다른 트리를 생성한다.

렌더 트리 생성이 끝나면 배치가 시작된다. 각 노드가 화면의 정확한 위치에 표시되는 과정이다.

배치가 끝나면 UI 백엔드에서 렌더 트리의 각 노드의 형상을 만들어내는 그리기 과정이 시작된다.

렌더링 엔진은 좀 더 나은 사용자 경험을 위해 가능하면 빠르게 내용을 표시하기 위해 모든 HTML을 파싱할 때까지 기다리지 않고 배치와 그리기 과정을 시작한다. 네트워크로부터 나머지 내용이 전송되기를 기다리는 동시에 받은 내용의 일부를 먼저 화면에 표시하는 것이다.

웹킷 동작 과정

게코 동작 과정

웹킷과 게코가 용어는 다르게 사용하지만 기본적인 동작 과정은 동일하다.

렌더 트리를 게코에서는 형상 트리(frame tree)라 부르고,
웹킷은 요소를 배치하는데 "배치(layout)", 게코는 "리플로우(reflow)" 라고 부른다.

"어태치먼트(attachment)"는 웹킷이 렌더트리를 생성하기 위해 DOM 트리와 스타일 규칙을 연결하는 과정이다.

렌더링 엔진은 HTML을 파싱하여 DOM Tree를 생성하고, 파싱하다가 link태그를 만나면 CSS를 파싱하여 CSSOM Tree를 생성한다.

그 이후에 attachment라는 과정을 거치면서 Render Tree를 생성한다. 각 DOM 노드에 attach라는 메소드가 있으며, 해당 노드가 추가되면 메소드를 실행시킨다. attach는 노드의 스타일을 객체 형태로 리턴시켜서 둘을 합친다.

여기서 DOM과 Render Tree는 항상 일치하지는 않다. 예를 들어 display: none;의 경우 화면상에 나타나지 않으므로 렌더 트리에서는 제외된다.

Layout, Paint, Composite

Layout

reflow로도 불리는 Layout 단계에서는 Render Tree를 화면에 어떻게 배치해야 할 것인지 노드의 정확한 위치와 크기를 계산한다.

루트부터 노드를 순회하면서 노드의 정확한 크기와 위치를 계산하고 Render Tree에 반영한다. 만약 크기 값을 %로 지정하였다면, Layout 단계에서 % 값을 계산해서 픽셀 단위로 변환한다.

Paint

이후 페인팅 과정을 거치게 되는데 여기서는 Layout 단계에서 계산된 값을 이용해 Render Tree의 각 노드를 화면상의 실제 픽셀로 변환한다. 이때 픽셀로 변환된 결과는 하나의 레이어가 아니라 여러 개의 레이어로 관리된다.

Composite

Composite 단계에서는 Paint 단계에서 생성된 레이어를 합성하여 실제 화면에 나타낸다.

Reflow(Layout)와 Repaint

레이아웃 크기나 위치에 영향이 가지 않는 스타일의 변화일 경우 Layout 과정을 건너뛰고 Paint과정부터 다시 시작하게 된다. Layout 단계에서 대부분의 연산작업이 이루어지기 때문에, Layout 단계를 건너뛰기만 해도 렌더링 속도가 크게 개선된다.

리플로우의 경우 다음과 같이 Repaint와 Composite 과정을 모두 거친다.

HTML, CSS, JS 파싱 -> 렌더트리 구축 -> 레이아웃 단계 -> 리페인트 단계 -> 레이어 업데이트 -> 합성 단계

리페인트 과정만 거친다면 다음과 같다.

HTML, CSS, JS 파싱 -> 렌더트리 구축 -> 리페인트 단계 -> 레이어 업데이트 -> 합성 단계

만약 둘다 필요없는 스타일의 변화라면 다음과 같다.

HTML, CSS, JS 파싱 -> 렌더트리 구축 -> 레이어 업데이트 -> 합성 단계

어떤 속성들이 레이아웃과 리페인트가 일어나도록 유발하는지 알아보자.

아래는 Reflow가 발생되는 대표적인 속성들이다. 아래 속성을 사용하면 화면을 다시 계산해야 한다.


position	width	height	left	top	right	bottom
margin	padding	border	border-width	display	float	font-family
text-align	font-size	font-weight	line-height	min-height	overflow	clear
vertical-align	white-space

아래는 Repaint가 발생되는 대표적인 속성들이다. 계산이 다시 일어나지 않기 때문에 성능 상 이점이 있다.


background	background-image	background-position	background-repeat	background-size	border-radius
border-style	box-shadow	color	line-style	outline	outline-color
outline-width	outline-style	text-decoration	visibility

다음과 같은 속성들은 Reflow, Repaint 둘다 거치지 않고 렌더된다. 그렇기 때문에 가장 성능상 좋다. 화면 상에 무언가를 위치시켜야 한다면 left, top과 같은 속성을 사용하는 것보다는 transform 속성을 사용하는 편이 좋다.


transform	opacity	cursor	orphans	perspective

참고

juyeong-s

frontend developer

다음 포스트