teawon

공부 & 개발 내용 기록 블로그

브라우저란?

웹 브라우저는 인터넷을 통해 웹 페이지를 탐색하고 사용할 수 있도록 도와주는 소프트웨어입니다.

브라우저는 HTML, CSS, JavaScript 등의 웹 기술을 이용하여 웹 페이지를 해석하고 렌더링합니다. 또한, 사용자 인터페이스를 제공하며, 이미지, 비디오 및 텍스트 데이터를 가져오고 처리하고 보안 기능을 지원합니다.

크롬, 사파리, 엣지 등 다양한 브라우저가 존재하며, 각각의 환경에 따라 서로 다른 엔진과 렌더링 방식을 사용합니다. 이러한 차이로 인해 웹 개발자들은 브라우저 간 호환성을 고려하여 웹 페이지를 제작해야 합니다.

1. 구성요소

웹 브라우저의 구성요소는 아래와 같이 분류할 수 있습니다.

image

  • 사용자 인터페이스(User Interface)

    image

    • 사용자가 웹페이지를 탐색하고 조작할 수 있는 다양한 요소를 포함합니다. 웹사이트 상단에 표현되는 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등의 요소로 사용자가 웹 페이지를 조작할 수 있는 인터페이스입니다.

    • 브라우저마다 해당 인터페이스는 다를 수 있으며, 사용자 경험을 개선하기 위한 다양한 UI 디자인이 있습니다.

  • 브라우저 엔진(Browser Engine)

    • 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어합니다.

      (사용자가 웹 페이지의 URL을 입력하면, 브라우저 엔진은 네트워크를 통해 해당 페이지를 가져오고 화면에 렌더링하는 작업은 렌더링 엔진에서 수행)

  • 렌더링 엔진(Rendering Engine)

    • HTML 및 CSS를 해석하여 화면에 출력하는 역할을 합니다.

    • 종류

      • Blink: 구글 크롬과 마이크로소프트 엣지에서 사용하는 브라우저 엔진
      • WebKit: 애플 사파리와 구글 크롬에서 사용하는 브라우저 엔진

왜 렌더링 엔진은 여러 종류가 있으며 다양하게 사용하나요?

Blink의 장점은 빠른 업데이트 주기와 낮은 메모리 사용량

WebKit의 장점은 안정성과 보안성이 높다는부분

즉, 각 렌더링 엔진마다 장단점이 있기 때문에 각각의 브라우저의 개발 방향과 목적, 성능 등을 고려하여 렌더링 엔진이 사용되고 있습니다.

  • 통신(Networking)

    • HTTP 요청과 같은 네트워크 호출을 수행합니다.

      • HTTP란 클라이이언트와 서버간의 응답 교환을 위한 프로토콜이며 웹 브라우저는 사용자가 요청한 URL을 HTTP 요청 메시지로 변환하여 서버로 전송합니다

  • UI 백엔드(UI Backend)

    • 브라우저의 UI 요소를 구성하는 데 필요한 다양한 기능을 제공합니다.

    • 윈도우, 대화 상자, 버튼, 폼 요소 등과 같은 브라우저의 기본 UI 및 클릭, 드래그, 마우스 오버 등의 이벤트를 처리합니다.

  • 자바스크립트 해석기(JavaScript Interpreter)

    • 자바스크립트 코드를 해석하고 실행합니다. (자바스크립트를 읽고 기계어로 변환해서 실행)

    • 브라우저마다 자바스크립트 해석기의 종류와 구현 방식이 다릅니다. (크롬의 경우, V8 자바스크립트 엔진 , 파이어폭스의 경우, SpiderMonkey 자바스크립트 엔진)

  • 데이터 저장소(Data Storage)

    • 쿠키, 로컬스토리지 , 세션스토리지 등 브라우저에서 데이터를 저장합니다.

2. 렌더링 과정

image

이해를 쉽게 하기 위해 아래의 html코드가 위 화면처럼 표현되어있다고 가정합시다.

우리가 보는 화면에 특정 컴포넌트가 표현되기까지의 어떤 과정이 브라우저상에서 이루어질까요?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<!DOCTYPE html>
<html>
  <head>
    <title>Title 요소</title>
    <style>
      h1 {
        color: red;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <h1>브라우저 렌더링 과정은?</h1>
    <p>어떻게 브라우저는 렌더링 될까요</p>
  </body>
</html>

2.1 DOM

웹 브라우저는 먼저 HTML 코드를 읽어서 DOM 트리를 생성합니다.

여기서 DOM 트리는 HTML 문서의 구조를 나타내는 트리 형태의 데이터 구조로, 웹 페이지의 요소와 속성, 텍스트 등을 포함합니다.

위 예시를 기준으로 웹 브라우저는 아래와 같은 DOM트리를 생성하게 되겠죠

1
2
3
4
5
6
7

html
├─ head
│   ├─ title
│   └─ style
└─ body
    ├─ h1
    └─ p

2.2 CSSOM

CSSOM은 CSS 스타일 정보를 포함하는 객체 모델로, 웹 페이지의 레이아웃을 결정하는 데 사용됩니다. 브라우저는 CSS 파일을 읽어 CSSOM을 생성합니다.

이 트리는 CSS 선택자와 스타일 정보를 포함합니다.

1
2
3
4
5
6
7

element { ... }
  ├─ html { ... }
  ├─ head { ... }
  │   └─ style { ... }
  └─ body { ... }
      ├─ h1 { color: red; font-size: 20px; }
      └─ p { ... }

2.3 Attachment

이후 브라우저는 DOM 트리와 CSSOM 트리를 결합하여 렌더 트리(Render Tree)를 생성합니다. 렌더 트리는 페이지의 시각적인 표현을 나타내며, 레이아웃 및 그리기 과정에서 사용됩니다.

1
2
3
4

html
└─ body
    ├─ h1 (color: red; font-size: 20px)
    └─ p

이때 렌더 트리는 화면에 실제로 그려지는 요소들만 포함합니다.

display: none 스타일이 적용된 요소와 <head> 내의 <title>과 같이 시각적으로 표시되지 않는 요소들은 렌더 트리에 포함되지 않습니다.

2.4 Layout

레이아웃 단계에서는 각 요소의 크기와 위치를 계산합니다. 브라우저는 렌더 트리의 노드들을 순회하며, 각 요소의 x, y 좌표, 너비, 높이 등의 정보를 결정합니다. 위 예시에서는 <h1>과 <p> 요소의 위치와 크기를 계산하게 됩니다.

만약 css에 padding : 10px , margin : 5px 등 위치와관련된 내용이 있다면 이를 계산하여 레이아웃을 정하게 되겠죠?

2.5 Painting

페인팅 단계에서는 레이아웃에서 계산된 위치와 크기 정보를 바탕으로 각 요소를 실제로 그리는 작업이 이루어집니다. CSS 스타일(색상, 그림자 등)을 적용하고, 이미지와 텍스트를 그립니다. 위 예시에서는 <h1> 요소를 빨간색 글씨와 20px 글꼴 크기로 그리고, <p> 요소를 기본 스타일로 그립니다.

2.6 Composite

컴포지트 단계에서는 각 레이어를 올바른 순서로 합치는 작업이 이루어집니다. 이 과정에서 브라우저는 투명도, 변환, 클리핑 등의 효과를 적용하며, 최종적으로 페이지의 모든 요소들을 하나의 이미지로 합칩니다. 위 예시에서는 <h1> 및 <p> 요소를 올바른 순서대로 합쳐, 최종적으로 화면에 표시될 이미지를 생성합니다.

특히 브라우저는 모든 HTML을 파싱할 때까지 기다리지 않고, 일부 내용이 네트워크로부터 전송되는 동안 렌더링 과정을 시작합니다.

이를 “점진적 렌더링”이라고 하는데 이 접근 방식은 렌더링 엔진이 HTML 문서를 전체적으로 기다리지 않고, 일부분이 전송되자마자 파싱 및 렌더링을 시작할 수 있도록 해줍니다. 이로 인해 웹 페이지가 사용자에게 빠르게 표시되고, 사용자는 페이지를 기다리지 않고 실시간으로 정보를 확인할 수 있습니다.

3. 렌더링 최적화

위의 브라우저의 렌더링 과정이 끝나고 표현된 웹페이지에서 사용자의 상호작용에 따라 새로운 버튼이 추가된다거나, 색이 바뀌는 등의 변화가 발생하면 어떻게 될까요?

Reflow와 Repaint는 웹 페이지 렌더링 과정에서 발생하는 두 가지 주요 작업입니다. 웹 페이지의 요소가 변경되거나 상호작용이 발생할 때, 이러한 작업이 발생합니다.

3.1 Reflow

Reflow는 DOM 요소의 레이아웃(위치, 크기)이 변경되어 다시 계산해야 할 때 발생하는 작업입니다. 이는 요소의 크기, 위치, 여백, 테두리 등과 관련된 CSS 속성이 변경될 때 발생합니다.

브라우저는 변경된 요소와 그 하위 요소들의 레이아웃을 다시 계산하고, 필요한 경우 관련된 다른 요소들의 레이아웃을 업데이트합니다.

Reflow는 성능에 영향을 미칠 수 있으므로, 최소한으로 유지하는 것이 중요합니다.

예를 들어, 버튼을 누르면 특정 요소의 너비가 변경되는 상황을 가정해봅시다. 이 경우에는 다음과 같은 작업이 발생합니다

  1. 사용자가 버튼 클릭

  2. 이벤트 핸들러가 요소의 너비 변경을 처리합니다.

    (ex 자바스크립트를 사용한 CSS 속성 변경)

  3. 브라우저는 요소의 너비가 변경되었다는 것을 인지하고, Reflow 작업을 시작합니다.

  4. 브라우저는 변경된 요소의 레이아웃을 다시 계산하고, 필요한 경우 관련된 다른 요소들의 레이아웃을 업데이트합니다.

  5. 브라우저는 변경된 레이아웃을 기반으로 화면에 요소들을 다시 그립니다.

이 예시에서는 요소의 레이아웃(크기)이 변경되었기 때문에 Reflow가 발생합니다. Reflow는 DOM 요소의 레이아웃이 변경되어 다시 계산해야 할 때 발생하는 작업으로, 성능에 영향을 미칠 수 있습니다.

따라서 최적화를 통해 Reflow를 최소화하는 것이 중요합니다.

3.2 Repaint

Repaint는 요소의 레이아웃이 변경되지 않았지만, 스타일(색상, 그림자 등)이 변경되어 화면에 다시 그려야 할 때 발생하는 작업입니다.

Repaint는 성능에 덜 영향을 미치지만 최적화 작업이 불필요하다는 것을 의미하지는 않습니다.

예를 들어, 버튼을 누르면 텍스트의 색이 바뀌는 요소를 추가했다고 가정해 봅시다. 이 경우에는 다음과 같은 작업이 발생합니다

  1. 사용자가 버튼을 클릭합니다.

  2. 이벤트 핸들러가 텍스트 색상 변경을 처리합니다.

  3. 브라우저는 텍스트 색상이 변경되었다는 것을 인지하고, Repaint 작업을 시작합니다.

  4. 브라우저가 변경된 스타일을 적용하여 텍스트를 다시 그립니다. 이 과정에서 화면이 업데이트되고, 사용자는 색상이 변경된 텍스트를 확인할 수 있습니다.

4. 마치며

웹 브라우저는 사용자에게 웹 페이지를 효과적으로 제공하기 위해 다양한 과정을 거칩니다. 이러한 과정을 이해하고 최적화하는 것은 웹 개발자들에게 매우 중요한 역량이며 브라우저의 구성 요소, 렌더링 과정 및 최적화 방법을 숙지함으로써 더 빠르고 효율적인 웹 페이지를 제작할 수 있도록 노력해야겠습니다.

참고자료

https://velog.io/@thyoondev

https://d2.naver.com

https://github.com/gyoogle

카테고리:

업데이트:

댓글남기기