본문 바로가기
카테고리 없음

[웹, 브라우저] 렌더링 과정, 렌더링 엔진

by hbIncoding 2025. 2. 10.

1. 웹 페이지가 렌더링 되는 과정

1. 네트워크 요청

  1. 사용자가 https://naver.com과 같은 웹사이트에 접속하면 DNS 조회를 통해 IP 주로를 찾는다.
  2. IP 주소를 찾은 후, 브라우저는 HTTP(S) 요청을 보내서 HTML, CSS, JavaScript, 이미지 등의 리소스를 가져온다.

2. HTML 파싱 및 DOM 생성

  1. 브라우저는 HTML 파일을 다운로드하고, 이를 파싱하여 DOM 트리를 생성한다.
  2. DOM(Document Object Model)은 HTML 태그를 트리 구조로 변환한 것이며, 각 태그는 노드가 된다.
<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

 위 HTML이 DOM 트리로 변환되면

Document
 ├─ <html>
 │   ├─ <head>
 │   │   ├─ <title>Example</title>
 │   ├─ <body>
 │       ├─ <h1>Hello, World!</h1>

 

3. CSS 파싱 및 CSSOM 생성

  1. 브라우저는 CSS 파일을 파싱하여 CSSOM(CSS Object Model) 트리를 생성한다.
  2. CSSOM은 각 요소가 어떤 스타일을 가지는지 구조화된 트리이다.
h1 {
    color: red;
    font-size: 24px;
}

위 CSS가 CSSOM 트리로 변환되면

CSSOM
 ├─ h1
 │   ├─ color: red
 │   ├─ font-size: 24px

 

4. DOM & CSSOM 결합 -> 렌더 트리 생성

  1. DOM + CSSOM을 결합하여 렌더 트리를 생성한다.
  2. 렌더 트리는 화면에 표시할 요소들만 포함하며, display: none같은 보이지 않은 요소는 제외된다.
Render Tree
 ├─ <h1 class="title">안녕하세요!</h1> (color: blue, font-size: 24px)
 ├─ <section class="content"> (display: flex, padding: 20px)
 │   ├─ <p class="description">이것은 예제 문장입니다.</p> (color: gray, font-size: 18px)
 │   ├─ <img class="thumbnail"> (width: 100px, height: 100px)

 

5. 레이아웃 단계

  1. 브라우저는 렌더 트리를 기반으로 각 요소의 위치와 크기(좌표, 너비, 높이 등)를 계산한다.
  2. 이 과정은 Flow, Flextbox, Grid 등의 CSS 규칙을 따른다.

6. 페인팅

  1. 브라우저가 각 요소를 픽셀로 변환하고 화면에 표시하는 과정
  2. CSS 스타일(색상, 배경, 그림자 등)을 적용하여 최종적인 픽셀을 만든다.

7. 합성

  1. 브라우저는 화면을 빠르게 갱신하기 위해 페이지를 여러 개의 Layer로 나눈다.
  2. GPU 가속을 사용하여 효율적으로 화면을 갱신한다.

2. 주요 웹 브러우저의 특징 & 렌더링 엔진

 각 브라우저는 자체 렌더링 엔진을 사용하여  HTML, CSS, JavaScript를 해석하고 화면에 표시한다.

브라우저 렌더링 엔진 특징
Chrome Blink Chromiun 기반, 빠른 성능, V8 엔진 사용
Firefox Gecko 강력한 개발자 도구, 오픈소스
Safari WebKit 애플 생태계 최적화, 빠른 성능
Edge Blink Chromiun 기반으로 변경됨(2019년 이후)
Opera Blink 가벼운 브라우저, VPN 기능 포함

 

3. 렌더링 엔진의 역사

  1. Webkit (2001~)
    • Apple이 개발한 렌더링 엔진으로, Safari와 초기 Chrome에서 사용
    • 2013년 Google이 Webkit을 포크하여 Blink 엔진을 개발
  2. Blink (2013~)
    • Google이 Webkit을 기반으로 개선한 렌더링 엔진
    • Chrom, Edge, Opera에서 사용
    • 성능 최적화, 빠른 업데이트 주기
  3. Gecko (1998~)
    • Mozilla가 개발한 오픈소스 렌더링 엔진.
    • Firefox에서 사용됨.
    • 표준을 잘 준수하지만, Chrome보다 속도가 느릴 수 있다.

4. 최적화 기법

  • Critical Rendering Path 최적화
    • CSSOM과 DOM을 빠르게 생성하기 위해 불필요한 CSS 및 JS 최소화
  • CSS & JavaScript 비동기 로딩
    • <link rel="stylesheet" async> 또는 defer 속성을 사용하여 렌더링 차단 최소화
  • Lazy Loading
    • loading="lazy" 속성을 사용하여 필요한 이미지/리소스만 로드
  • GPU 가속 사용
    • will-change, transform, opacity 속성을 활용하여 애니메이션 성능 향상
  • 리플로우(reflow) 최소화
    • CSS 변경이 ㅁ낳으면 레이아웃 재계산이 발생 -> 가능하면 클래스를 한 번에 변경
  • CDN(Content Delivery Network) 활용
    • 전 세계 서버에서 빠르게 리소스를 로드

 

저작자표시

티스토리툴바