렌더링 엔진 - 요청한 콘텐츠를 표시. 예를 들어 HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시함.
1. 렌더링 엔진
렌더링 엔진의 역할은 요청 받은 내용을 브라우저 화면에 표시하는 일이다. HTML이나 CSS 외에 다른 유형도 표시할 수 있지만, 이 페이지에서는 HTML과 CSS에 초점을 맞출 것이다.
렌더링 엔진에도 여러 종류가 있는데, 흔히 사용하는 크롬과 사파리는 Webkit 엔진을 사용한다. 자세한 내용은 webkit.org 참고
2. 동작 과정
다음은 렌더링 엔진(웹킷)의 기본적인 동작 과정이다.
브라우저가 페이지를 렌더링하려면 먼저 HTML과 CSS를 파싱해서 DOM 및 CSSOM 트리를 생성해야 한다.
3. 객체 모델 (Object Model) 생성
- 서버로부터 받은 문서는 바이트 → 문자 → 토큰 → 노드 → 객체 모델로 변환된다.
- HTML은 DOM(Document Object Model)으로 변환되고, CSS는 CSSOM(CSS Object Model)로 변환된다.
- DOM과 CSSOM은 서로 독립적인 데이터 구조이다.
3.1. DOM(Document Object Model)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="style.css" rel="stylesheet">
<title>Critical Path</title>
</head>
<body>
<p>Hello <span>web performance</span> students!</p>
<div><img src="awesome-photo.jpg"></div>
</body>
</html>위와 같은 HTML로부터 DOM 트리를 생성한다고 하면, 다음의 과정을 거치게 된다.
이 전체 프로세스의 최종 출력이 바로 이 간단한 페이지의 DOM(Document Object Model)이며, 브라우저는 이후 모든 페이지 처리에 이 DOM을 사용한다.
3.2. CSSOM(CSS Object Model)
body { font-size: 16px }
p { font-weight: bold }
span { color: red }
p span { display: none }
img { float: right }브라우저는 DOM을 생성하는 동안 외부 CSS 스타일시트인 style.css를 참조하는 문서의 헤드 섹션에서 링크 태그를 만나게 된다. 페이지를 렌더링하는 데 이 리소스가 필요할 것이라고 판단한 브라우저는 이 리소스에 대한 요청을 즉시 발송하고 요청의 결과로 다음 콘텐츠가 반환된다.
HTML과 마찬가지로, 수신된 CSS 규칙을 브라우저가 이해하고 처리할 수 있는 형식으로 변환해야 한다.
결과물은 다음과 같다.
(파싱에 대해 자세히 알고 싶다면, 브라우저는 어떻게 동작하는가 참고)
4. 렌더 트리 생성
- CSSOM과 DOM 트리는 결합하여 렌더링 트리를 형성한다.
- 렌더링 트리에는 페이지를 렌더링하는 데 필요한 노드만 포함된다.
브라우저는 DOM 트리의 루트에서 시작해서 표시되는 노드 각각을 추적한다. script 태그나 meta 태그는 표시되지 않으며, 렌더링된 출력에 반영되지 않으므로 생략된다. span 태그 역시 css의 display: none; 속성에 의해 렌더링 트리에서 누락된다.
5. 레이아웃 계산
레이아웃 프로세스에서는 뷰포트 내에서 각 요소의 정확한 위치와 크기를 정확하게 캡처하는 '상자 모델'이 출력된다. 모든 상대적인 측정값은 화면에서 절대적인 픽셀로 변환된 다.
6. 그리기
표시되는 노드와 해당 노드의 계산된 스타일 및 기하학적 형태에 대해 파악했으므로, 렌더링 트리의 각 노드를 화면의 실제 픽셀로 변환하는 마지막 단계로 이러한 정보를 전달할 수 있다. 이 단계를 흔히 '페인팅' 또는 '래스터화'라고 한다.
'웹' 카테고리의 다른 글
| 브라우저는 어떻게 동작하는가? (1) - 브라우저 구성요소 (0) | 2021.10.03 |
|---|---|
| 브라우저는 어떻게 동작하는가? (0) - 주절주절 (0) | 2021.08.25 |
