7월 24일 -브라우저

Yullgiii·2024년 7월 24일

개발자로의 취업을 준비하며 TIL

목록 보기

245/309

브라우저의 동작 원리

HTML 마크업을 처리하고 DOM 트리를 빌드한다

브라우저는 HTML 문서를 파싱하여 DOM(Document Object Model) 트리를 생성한다. 이는 문서의 구조를 트리 형태로 표현한 것이다. DOM 트리는 HTML 요소와 그 속성을 노드로 표현하며, 각 노드는 자바스크립트 객체로 변환된다.

CSS 마크업을 처리하고 CSSOM 트리를 빌드한다

CSSOM(CSS Object Model) 트리는 CSS를 파싱하여 생성된다. 이는 CSS 규칙을 트리 형태로 표현한 것이다. 브라우저는 이 트리를 통해 각 요소가 어떤 스타일을 적용받는지 결정한다.

DOM 및 CSSOM을 결합하여 렌더링 트리를 형성한다

DOM 트리와 CSSOM 트리를 결합하여 렌더링 트리(Render Tree)를 생성한다. 렌더링 트리는 화면에 실제로 그려질 요소들만 포함한다. 예를 들어, display: none; 속성이 적용된 요소는 렌더링 트리에 포함되지 않는다.

렌더링 트리에서 레이아웃을 실행하여 각 노드의 기하학적 형태를 계산한다

렌더링 트리의 각 노드는 화면에서의 위치와 크기를 계산한다. 이를 레이아웃(Layout) 단계라고 한다. 브라우저는 Box-Model을 사용하여 각 요소의 기하학적 형태를 결정한다.

개별 노드를 화면에 페인트한다

최종적으로 각 노드는 화면에 페인트(Paint)된다. 이를 래스터화(Rasterization) 단계라고도 한다. 이 단계에서는 요소의 색상, 그림자, 텍스트 등 모든 시각적 요소가 실제 픽셀로 변환된다.

Document Object Model

DOM은 HTML 및 XML 문서의 프로그래밍 인터페이스이다. 웹 페이지는 수많은 이벤트(Event)와 함께 동작한다. 이벤트는 다음과 같은 상황에서 발생한다:

브라우저(user agent)로부터 발생하는 이벤트
사용자의 행동(interaction)에 의해 발생하는 이벤트
DOM의 ‘변화’로 인해 발생하는 이벤트

이벤트는 자바스크립트 객체로 표현되며, 브라우저의 Event 인터페이스에 맞춰 구현된다. 이벤트는 DOM 트리 구조에서 Element의 위상(hierarchy)에 의해 결정된 전파 경로(propagation path)를 따라 전파된다.

예제

다음은 간단한 HTML과 자바스크립트를 사용한 예제이다. 클릭 이벤트가 발생하면 이벤트의 전파 경로를 출력한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM Event Propagation</title>
    <style>
        .parent {
            width: 200px;
            height: 200px;
            background-color: lightblue;
            padding: 20px;
        }
        .child {
            width: 100px;
            height: 100px;
            background-color: lightcoral;
        }
    </style>
</head>
<body>
    <div class="parent">
        Parent
        <div class="child">
            Child
        </div>
    </div>

    <script>
        document.querySelector('.parent').addEventListener('click', function(event) {
            console.log('Parent clicked');
        });

        document.querySelector('.child').addEventListener('click', function(event) {
            console.log('Child clicked');
            event.stopPropagation(); // 이벤트 전파 중지
        });
    </script>
</body>
</html>

So...

브라우저는 HTML과 CSS를 파싱하여 DOM과 CSSOM 트리를 생성하고, 이를 결합하여 렌더링 트리를 만든다. 렌더링 트리는 레이아웃과 페인팅 단계를 거쳐 화면에 시각적으로 표현된다. 또한, 이벤트는 DOM 트리를 따라 전파되어 다양한 상호작용을 가능하게 한다. 이를 이해하면 웹 페이지의 성능 최적화와 디버깅에 큰 도움이 된다.