HTML 문서가 브라우저에 랜더링되는 과정

Frontend/Web

HTML 문서가 브라우저에 랜더링되는 과정

Rayched 2023. 12. 18. 16:10

1. 랜더링 Rendering의 정의

HTML, XML과 같은 Markup 언어로 작성된 문서를 chrome이나 Firefox와 같은 웹 브라우저에서 열면

해당 브라우저의 엔진 (Chrome = Blink, Firefox = Gecko)이 사람의 눈으로 볼 수 있는 형태로 변환해 준다.

이때 Markup 언어로 작성된 문서를 사람의 눈으로 볼 수 있는 형태로 변환해 주는 과정을

랜더링 Rendering이라고 한다.

2. 웹 문서가 브라우저에 랜더링 되는 과정

프로그래밍에서의 랜더링 Rendering이 무엇인지 간단하게 알아봤으니

이제 본격적으로 웹 문서가 브라우저에 랜더링 되는 과정에 대해 다뤄보도록 하겠다.

아래 HTML 문서, 웹 페이지를 구글 크롬과 같은 웹 브라우저로 연다고 가정해 보자.

아래는 설명을 좀 더 수월하게 하기 위한 HTML, CSS 예제 코드들이다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>버튼 클릭 예제</title>
    <link href="style.css" rel="stylesheet"/>
</head>
<body>
    <h4>아래 버튼을 클릭해보세요 👇</h4>
    <button onclick="alert('Hello');">Click !</button>
</body>
</html>

body {
    font-size: 20px;
}

button {
    font-weight: bold;
    color: white;
    background-color: blueviolet;
    border: 3px solid black;
    border-radius: 5px;
    padding: 5px;
}

버튼 클릭 예제 / Codepen

위의 버튼 클릭 예제는 아래의 과정을 거쳐서 브라우저 화면에 랜더링 된다.

각 과정에 대해서 하나씩 알아보도록 하자.

① DOM, CSSOM 트리 생성

브라우저를 통해 위의 웹 페이지를 열면, 서버로부터 HTML, CSS 등

웹 페이지를 랜더링 하는데 필요한 리소스를 다운로드한다.

이후에 HTML 코드는 DOM 트리로, CSS 코드는 CSSOM 트리로 변환된다.

(1). DOM

HTML 코드는 아래의 과정을 거쳐서, DOM 트리로 변환된다.

1. 변환
- 브라우저가 HTML의 원시 Byte를 읽어와서, HTML 문서에 정의된 인코딩 방식에 따라 개별 문자로 반환한다.
(인코딩 방식이 utf-8로 지정됐다면, utf-8에 맞는 형태로 반환한다.)

2. 토큰화
- 브라우저가 반환된 문자열을 W3C 표준에 지정된 고유 토큰으로 변환한다.

3. 렉시오 (Lexing)
- 변환된 토큰을 해당 속성 및 규칙을 정의하는 객체 Object의 형태로 변환한다.

4. DOM 생성
- 객체의 형태로 변환된 토큰을, HTML 문서에 정의된 여러 태그 간의 관계를 참조해서
트리 데이터 구조로 연결시킨다.