Browser Rendering

개발(공부) 자국·2021년 9월 9일

웹 브라우저가 하는 일

사용자가 Url에 접속하면 사용자의 브라우저에 HTML 파일을 다운받고 웹 페이지가 브라우저에 나오게 된다. 이때 브라우저는 HTML에 작성된 코드를 읽고 페이지를 브라우저에 그려주게 된다. 이때 브라우저가 어떤 과정을 통해서 화면에 작성된 파일들을 보여주는지 그 구조에 대해서 알아보자. 크롬을 기준으로 알아보려고 한다.

브라우저는 이런 7가지의 구성요소로 나눠서 볼 수 있다.

User Interface

주소 표시줄, 이전/ 다음/ 새로고침 등 웹페이지를 제외하고 사용자와 상호작용하는 사용자 인터페이스를 User Interface에서 담당한다.

Rendering Engine

HTML과 CSS를 파싱하여 요청한 웹 페이지를 표시하는 렌더링 엔진으로 사용자가 페이지에 접속했을때 보여지는 뷰포트 안에 보여지는 부분을 그리는 역할을 담당한다.

Browser Engine

User Interface와 Rendering Engine을 연결하여 User Interface가 Rengering 하는 작동을 통해 상호작용 하게 하는 역할을 한다.

Networking

각종 네트워크 요청을 수행하는 부분으로 인터넷에 연결되어 프로토콜에 맞는 요청과 응답을 담당하고 CORS에 대한 부분도 담당한다.

UI Backend

체크박스나 버튼과 오디오 버튼, 입력상자와 같은 기본적인 위젯을 그리는데 도움을 주는 역할을 한다.

Data Persistence

Local Storage나 Cookie와 같이 보조 기억장치에 데이터를 저장하는 역할로 BrowserEngine 에서 접근이 가능하다.

Javascript Interpreter

자바스크립트 코드를 실행하는 Interpreter로 크롬의 경우는 C++로 만든 V8엔진을 사용하고 있다.

Rendering Engine은 어떻게 작동할까

여러 브라우저들은 저마다 다른 Rendering Engine을 가지고 있다. 구글에서는 Blink 사용하고 있다. Blink는 웹브라우저 개발 기반을 제공하는 오픈소스 응용프로그램 프레임 워크다. 구글, 오페라, 웨일 등의 브라우저에서 사용하고 있다.

Rendering Engine에는 두가지 목표를 가진다.

웹 페이지 요소들을 Rendering
효율적인 Rendering을 위한 자료구조 생성

렌더링 엔진은 위와같은 과정으로 동작한다. 이 과정을 Critical Rendering Path라고 한다.

이를 토대로 어떻게 작동하는지 순서대로 살펴보자.

1. DOM Tree 생성

먼저 브라우저에서 사요자가 요청한 웹 페이지 문서를 불러오고 파싱한다.

<!DOCTYPE html>
<html>
  <head>
    <title>Browser Rendering</title>
    <link rel="stylesheet" href="style.css" />
    <meta charset="utf-8" />
  </head>
  <body>
    <!-- 주석입니다 -->
    <h1>브라우저 렌더링</h1>
    <p>DOM Tree를 생성한다</p>
    <span>여기는 안 보여요</span>
    <div>
      <img src="image.jpg" alt="이미지" />
    </div>
  </body>
</html>

이와 같은 HTML의 코드를 어휘 분석을 통해서 html5 에 지정된 고유한 토큰으로 변환된다.
예를들어 StartTag html라는 토큰은 "html이라는 태그가 열렸다"라는 의미를 가진다. EndTag body라는 토큰은 "body라는 태그가 닫혔다" 라는 의미를 가진다. 그리고 브라우저의 렉싱 과정을 통해서 토큰이 해당 속성과 규칙을 정의하는 노드 객체로 변환된다. 그리고 각 노드가 서로 연관성을 가질 수 있도록 트리를 생성하는데 이게 바로 DOM Tree 다.

html문서에 있는 모든 것들은 이 DOM을 구성하게 된다. 먼저 최상위에 있는 document 객체가 들어간다. tag는 Element node가 되고 tag의 노드는 attribute node가 된다. text의 경우는 text node 가 되면서 트리구조가 생성된다. 이외의 주석도 comment 노드가 되어서 생성한다.
브라우저는 html 문서를 파싱하는 과정에서 javascript나 css 같이 추가로 필요한 파일들을 불러오도록 요청하기도 한다.

2. CSSOM Tree 생성

HTML을 DOM 트리로 만드는 것과 비슷하게 CSS로는 CSSOM이라는 Tree가 만들어진다.

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;
}

CSSOM은 DOM이 어떻게 화면에 표시될지를 알려주는 역할을 한다. CSS도 위에서 아래로 스타일 규칙이 정해지기 때문에 이또한 트리구조를 가지고 있다.

예를 들어서 style sheet에서 body 태그에 text-align이라는 속성을 정해두었다면 body의 자식 요소들에게도 동일한 속성이 전파되어서 적용되게 된다.

3. Render Tree 생성

Rendering Engine이 DOM Tree와 CSSOM Tree를 합쳐서 Render Tree라는 것을 만들게 된다.

Render Tree는 화면에 표시되어야할 모든 노드의 컨텐츠 스타일 정보를 포함하고 있는 트리다. Render Tree가 만들어지는 과정을 대략적으로 설명하자면 Document 객체부터 각 노드를 순회하면서 각각에 맞는 CSSOM을 찾아서 규칙을 적용한다. 그러면서 Render와 관련된 요소들을 Render Tree에 포함시킨다. 이때 meta tag나 display: none 과 같은 속성을 가진 요소들은 Render과는 관계가 없기 때문에 Render Tree에 포함되지 않는다. 이 Render Tree 그림은 많이 간소화 되어있기 때문에 실제로는 그림보다 더 많은 데이터를 가지고 있고 브라우저마다 조금씩 다르게 생성된다는 것을 알아두면 좋다.

4. Layout & Paint

Render Tree가 생성되었다면 Layout 이라는 과정을 거치게 된다.
reflow라고도 부른다. 이는 뷰포트 내에서 요소들의 정확한 위치와 크기를 계산하는 과정이다. 박스 모델에 따라서 텍스트나 요소의 박스가 화면에서 차지하는 영역이나 여백, 그리고 위에 스타일 속성이 계산된다. 이때 CSS 에서 % 나 em 같은 상대적인 단위를 사용했을 때는 디바이스의 뷰포트에 맞춰서 픽셀 단위로 변환 된다. layout 과정에서 렌더링 엔진이 각 요소들이 어떻게 생겼고 이를 어떻게 보여줄지 알게되면 마지막으로 화면에 실제 필셀로 그려지도록 변환하는 과정을 거치는데 이것이 paint 과정이다. 이 과정에서 Render Tree에 포함된 요소들이나 text, 이미지들이 실제 픽셀로 그려진다.