Laffee's Blogu

브라우저의 기본 구조

User Interface - 주소 표시줄, 이전/다음 버튼, 북마크 메뉴, 새로고침 버튼 등. 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분.

Browser Engine

유저 인터페이스와 렌더링 엔진 사이의 동작을 제어.
유저로부터 받은 input을 가지고 렌더링 엔진을 조작.
Data Storage와 커뮤니케이션.

Rendering Engine

대부분의 경우 HTML과 CSS를 파싱하여 화면에 표시한다.
각종 플러그인을 활용하면 PDF 파일 같은 것들도 화면에 보여줄 수 있다

대표 브라우저별 렌더링 엔진

Chrome & Opera 15+: Blink (A fork of Webkit)
Internet Explorer: Trident
EdgeHTML: Microsoft Edge
Firefox & other Mozilla browsers: Gecko
Chrome (iPhone) & Safari: Webkit

참고로 iOS 플랫폼에서는 모든 브라우저들이 Webkit 렌더링 엔진 위에서 동작하여야 한다. 아래 링크를 참고.

https://blog.chromium.org/2017/01/open-sourcing-chrome-on-ios.html

그래서 같은 Chrome 브라우저라고 해도 iOS에서는 다른 렌더링 엔진이 사용된다. 한번 PWA를 시도해본 적이 있었는데, iOS의 크롬에서는 안되고 안드로이드 폰에서는 가능하다는 것을 알게됬었다. 물론, 렌더링 엔진이 달라서 iOS 크롬에서는 지원하지 않는 것인지는 모르겠지만 말이다.

Network

HTTP 요청, 웹소켓, WebRTC와 같은 네트워크 호출에 사용됨.
플랫폼 독립적인 인터페이스이고 각 플랫폼 하부에서 실행

UI Backend

콤보 박스와 창 같은 기본적인 장치를 그림.
플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용.

JS Engine

자바스크립트 코드를 해석하고 실행한다. 그리고 그 결과를 렌더링 엔진에 전달한다.

브라우저별 JS 엔진 종류

Google Chrome: V8 : Node.js에서도 사용된다.
Mozilla Firefox: SpiderMonkey
- 자바스크립트의 창시자에 의해 개발된 역사상 첫 번째 JS 엔진.
Safari: Nitro(예전에는 SquirrelFish라는 엔진을 사용)
Edge: Chakra
Opera: V8
- 구글 크롬에서 동작하는 것들은 오페라에서도 보통 동작한다고 보면된다. 같은 렌더링 엔진과 JS 엔진을 사용하기 때문.
IE: Chakra

Data Storage

이름 그대로 사용자의 브라우저에 데이터를 저장하기 위해 존재한다.
HTTP 쿠키, 브라우저 캐싱, Indexed DB와 같은 Web APIs를 위해 사용된다.

렌더링 엔진 동작 과정

Webkit 엔진의 동작 과정

렌더링 엔진은 먼저 네트워크 컴포넌트로부터 요청한 리소스들을 받는다.

리소스 중 HTML은 HTML 파서를 통해 DOM 트리로 변환되는데, 크게 아래 2가지 과정을 거친다.

토큰화

위 사진처럼 html 마크업 시 우리가 열고 닫는 태그들이 어떤 구조로 열고 닫히는지를 설명하는 토큰들로 변환된다.

규칙에 따라 문서 구조를 분석하여 트리 생성

최상위 객체는 Document이고 주석이나 텍스트 그리고 태그들의 속성(attribute)까지도 구분되 어 전부 트리에 포함된다.

CSS도 CSS 파서에 의해 파싱되어 CSSOM 트리로 변환된다.

body {
  margin: 0;
	padding: 0;
  text-align: center;
}

h1 {
	color: red;
}

p {
	font-size: 20px;
	text-align: right;
}

div {
	width: 50%;
	margin: 0 auto;
}

span {
	display: none;
}

예를 들어 위와 같은 css는 아래와 같은 형태의 트리구조로 변환된다.

렌더 트리

화면에 표시되어야할 모든 노드의 컨텐츠, 스타일 정보를 포함하는 트리.

웹킷은 요소를 배치하는데 "배치(layout)" 라는 용어를 사용하지만 게코는 "리플로(reflow)" 라고 부른다.

게코 엔진의 리플로우 영상을 한 번 보면 레이아웃(리플로우) 과정이라는게 어떤 것인지 도움이 된다.

https://www.youtube.com/watch?v=ZTnIxIA5KGw

Paint / Repaint

화면에 실제로 그려지는 단계. 렌더 트리에 포함된 요소들이 그려진다. 더 자세히 말하자면 HTML 태그들과 그 태그들이 포함하고 있는 텍스트, 이미지 등이 전부 그려진다. 레이아웃(리플로우) 단계와 마찬가지로 웹킷에서는 이 과정을 "Paint", 게코 엔진에서는 "Repaint"라고 부른다.