brunch

You can make anything
by writing

C.S.Lewis

by 더오픈프로덕트 Oct 09. 2024

브라우저 랜더링 과정

브라우저 렌더링 과정은 웹 페이지가 사용자에게 어떻게 표시되는지 이해하는 데 매우 중요합니다. 이 과정은 브라우저가 HTML, CSS, JavaScript 파일을 받아 사용자가 상호작용할 수 있는 형태로 화면에 렌더링하는 일련의 단계를 포함합니다. 이 글에서는 브라우저의 렌더링 과정 전체를 다루며, 각 단계가 어떻게 작동하는지 설명하고자합니다.

1. 브라우저의 주요 구성 요소

브라우저가 웹 페이지를 렌더링하는 데는 다양한 구성 요소가 관여합니다. 먼저 브라우저의 주요 구성 요소를 간단히 살펴보겠습니다.

https://web.dev/articles/howbrowserswork

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

사용자가 브라우저와 상호작용할 수 있는 요소들로, 주소 표시줄, 북마크, 뒤로 가기 버튼 등으로 구성됩니다.

✅ 브라우저 엔진 (Browser Engine)

사용자 인터페이스와 렌더링 엔진 사이의 커뮤니케이션을 담당합니다.

✅ 렌더링 엔진 (Rendering Engine)

HTML과 CSS를 해석하여 화면에 페이지를 그리는 역할을 합니다. 예를 들어, 구글 크롬과 엣지는 블링크(Blink) 렌더링 엔진을, 파이어폭스는 게코(Gecko) 엔진을, 사파리는 웹킷(WebKit) 엔진을 사용합니다.

✅ 네트워킹 (Networking)

서버와의 네트워크 통신을 담당하며, HTTP/HTTPS 요청을 보내고 데이터를 받습니다.

✅ JavaScript 엔진 (JavaScript Interpreter)

JavaScript 코드를 처리하는 엔진입니다. 크롬에서는 V8 엔진이, 파이어폭스에서는 스파이더몽키(SpiderMonkey) 엔진이, 사파리에서는 웹킷(WebKit) 엔진이 사용됩니다.

✅ UI 백엔드 (UI Backend)

브라우저의 기본적인 그래픽 기능을 처리하는 역할을 합니다. 위젯과 콤보박스 등의 기본적인 UI 요소를 그리는 데 사용됩니다.

✅ 데이터 저장소 (Data Storage)

쿠키, 로컬 스토리지, 캐시 등의 데이터를 로컬에 저장하고 관리하는 기능입니다.

2. 브라우저 렌더링 과정 단계

1) URL 입력과 요청 (Request)

렌더링 과정은 사용자가 주소창에 URL을 입력하고 "Enter"를 누르는 순간 시작됩니다. 이때 브라우저는 사용자가 입력한 URL을 분석해 HTTP(S) 요청을 서버에 전송합니다.

이 과정에서 네트워크 계층을 통해 해당 URL에 맞는 IP 주소를 확인하기 위해 DNS(Domain Name System) 조회가 이루어지며, 이 IP 주소로 요청이 전송됩니다. 서버가 요청을 받으면, 브라우저는 HTML 파일을 시작으로 CSS, JavaScript, 이미지 등 관련 리소스 파일들을 차례로 받습니다.

2) HTML 파싱 (Parsing)

HTML 파일이 브라우저에 도착하면 렌더링 엔진은 HTML 문서를 파싱합니다. 이때 브라우저는 텍스트로 이루어진 HTML 문서를 DOM(Document Object Model)이라는 트리 구조로 변환합니다.

DOM 트리는 HTML 문서의 계층적 구조를 반영하며, 브라우저가 각 요소를 쉽게 접근하고 조작할 수 있도록 돕습니다. 예를 들어, <body>, <div>, <h1> 같은 HTML 태그들이 DOM 트리의 노드로 변환됩니다.

3) CSS 파싱과 스타일 계산

HTML 파싱과 동시에, 브라우저는 CSS 파일을 요청하고 이를 파싱합니다. CSS는 HTML 요소의 스타일을 정의하므로, 브라우저는 CSS를 파싱한 후 스타일 규칙을 DOM 트리의 각 요소에 적용합니다.

이 과정에서 브라우저는 스타일 규칙을 적용하기 위해 스타일 규칙 상속과 계산을 수행합니다. 스타일 시트의 규칙과 CSS 규격에 따른 우선순위(cascade)에 따라 각 요소에 어떤 스타일이 적용될지 결정합니다.

이 결과로 렌더 트리(Render Tree)가 생성됩니다. 렌더 트리는 DOM 트리의 각 요소에 스타일을 적용한 결과물입니다. 렌더 트리는 DOM 트리와는 약간 다를 수 있습니다. 예를 들어, display: none 속성이 적용된 요소는 렌더 트리에 포함되지 않습니다.

4) 레이아웃 단계 (Layout)

렌더 트리가 완성되면 브라우저는 각 요소가 화면에서 차지할 크기와 위치를 계산하는 레이아웃(Layout) 과정을 수행합니다. 이 과정을 "박스 모델(Box Model)"이라고도 부릅니다. 레이아웃 단계에서는 각 요소의 위치, 크기, 여백(margin), 패딩(padding), 테두리(border) 등을 계산하여 화면에 배치합니다.

이 과정은 뷰포트(viewport) 크기, 즉 사용자가 보는 브라우저 창의 크기에 따라 결정됩니다. 또한 레이아웃은 흐름에 따라 요소들이 어떻게 배치될지를 계산하므로, 상대적 위치나 플렉스 박스(Flexbox) 레이아웃처럼 동적으로 배치되는 요소들도 이때 결정됩니다.

5) 페인트(Paint)

레이아웃이 완료되면, 브라우저는 화면에 요소들을 그리는 페인트(Paint) 단계로 넘어갑니다. 페인트 단계에서는 색상, 배경 이미지, 텍스트, 테두리 등과 같은 시각적 속성을 실제 픽셀로 변환하여 브라우저 화면에 그립니다.

이 과정에서 각 요소의 시각적 속성을 기반으로 브라우저는 일종의 페인트 레이어(Paint Layer)를 생성하고, 이 레이어들은 하나의 화면에 렌더링됩니다. 복잡한 웹 페이지일수록 페인트 단계에서 여러 번의 렌더링이 발생할 수 있습니다.

6) 합성과 레이어(Layer) 처리

복잡한 웹 페이지는 종종 여러 레이어로 구성됩니다. 각 레이어는 별도의 스택에서 그려지고, 브라우저는 이 레이어들을 결합하여 최종 화면을 구성합니다. 이를 합성(Compositing)이라고 합니다.

예를 들어, 고정된 요소(fixed position)나 애니메이션 효과가 있는 요소들은 별도의 레이어로 처리됩니다. 브라우저는 이러한 레이어들을 효율적으로 렌더링하기 위해 GPU를 사용하기도 합니다. 특히, 스크롤이나 애니메이션이 포함된 페이지에서는 이 레이어 처리와 합성 과정이 중요한 역할을 합니다.

7) JavaScript의 역할과 DOM 변경

JavaScript는 DOM을 동적으로 변경할 수 있는 기능을 제공합니다. 브라우저는 JavaScript 코드를 처리하기 위해 JavaScript 엔진을 사용합니다. 이 엔진은 JavaScript 코드를 해석하고, 필요한 경우 DOM을 업데이트합니다.

DOM이 업데이트되면 렌더링 파이프라인에서 레이아웃과 페인트 과정이 다시 트리거될 수 있습니다. JavaScript의 변경 사항이 DOM 구조나 스타일에 변화를 일으킬 때, 브라우저는 이러한 변경 사항을 반영하기 위해 리플로우(reflow)나 리페인트(repaint)를 수행합니다. 이는 페이지 성능에 영향을 미칠 수 있는 중요한 부분입니다.

3. 최적화 기법

브라우저가 웹 페이지를 빠르고 효율적으로 렌더링하기 위해 다양한 최적화 기법을 사용합니다. 몇 가지 중요한 최적화 기법을 소개하겠습니다.

✅ 레이지 로딩(Lazy Loading)

이미지나 비디오처럼 무거운 리소스는 사용자가 실제로 해당 콘텐츠를 스크롤하여 볼 때까지 로딩을 지연시키는 레이지 로딩 기법을 사용할 수 있습니다. 이를 통해 초기 로딩 속도를 크게 개선할 수 있습니다.

✅ 요청 최소화

브라우저가 서버로부터 받아야 하는 리소스 수를 줄이기 위해, CSS, JavaScript, 이미지 파일을 최소화(minify)하거나 파일을 합치는 번들링(bundling) 기법을 사용합니다. 이렇게 하면 네트워크 요청을 줄이고 성능을 향상시킬 수 있습니다.

✅ GPU 활용

브라우저는 애니메이션이나 3D 그래픽 같은 복잡한 렌더링 작업에서 GPU를 사용하여 성능을 향상시킬 수 있습니다. CSS에서 will-change 속성을 사용하여 브라우저에게 미리 GPU 처리를 예고하는 것도 성능 최적화에 유용합니다.

4. 브라우저 성능 최적화 기법

웹 페이지의 성능은 사용자 경험에 큰 영향을 미칩니다. 페이지가 빠르게 로드되고 부드럽게 동작할수록 사용자는 긍정적인 경험을 하게 됩니다. 반대로 페이지 로딩이 느리거나 자주 끊기면 사용자는 이탈할 가능성이 높아집니다. 이를 보완하기 위해 웹 페이지 성능을 최적화하는 방법에 대해 몇 가지 소개하겠습니다.

1) CSS와 JavaScript의 비동기 로딩

일반적으로 CSS와 JavaScript 파일은 문서의 상단 <head> 부분에 로드됩니다. 그러나 이러한 외부 리소스가 동기적으로 로드되면 페이지의 렌더링이 지연될 수 있습니다. 이를 해결하기 위해 비동기 로딩(asynchronous loading) 기법을 사용할 수 있습니다.

> CSS 비동기 로딩

media 속성을 사용하여 특정 미디어 타입(예: print)에 해당하는 CSS만 지연 로드할 수 있습니다. 이렇게 하면 화면에 즉시 필요한 CSS만 우선 로드됩니다.

> JavaScript 비동기 로딩

2) 이미지 최적화

이미지는 웹 페이지 로딩 속도에 큰 영향을 미치는 요소 중 하나입니다. 고해상도 이미지는 파일 크기가 크기 때문에 네트워크 대역폭을 많이 차지하며, 로딩 시간도 길어집니다. 이를 해결하기 위해 다양한 이미지 최적화 방법을 사용할 수 있습니다.

> 이미지 압축

손실 압축과 무손실 압축 기법을 사용하여 이미지 파일 크기를 줄일 수 있습니다. JPEG, PNG, WebP 같은 포맷을 사용하여 이미지의 품질과 파일 크기를 적절히 조정해야 합니다.

> 적응형 이미지(Responsive Image)

<img> 태그에서 srcset 속성을 사용하면 기기 해상도에 맞는 최적의 이미지 크기를 제공할 수 있습니다. 예를 들어, 데스크탑 사용자는 고해상도 이미지를, 모바일 사용자는 저해상도 이미지를 다운로드받도록 설정할 수 있습니다.

> 레이지 로딩(Lazy Loading)

이미지를 처음부터 모두 로드하지 않고, 사용자가 해당 이미지가 포함된 부분으로 스크롤할 때 로드하는 방식입니다. 이 기법을 사용하면 페이지의 초기 로딩 시간을 크게 단축할 수 있습니다. HTML5의 loading="lazy" 속성을 활용하면 손쉽게 레이지 로딩을 적용할 수 있습니다.

3) 리소스 압축과 캐싱

웹 페이지에서 사용하는 리소스의 크기를 줄이고, 재방문 시 빠르게 페이지를 로드하기 위해 압축과 캐싱 기법을 사용할 수 있습니다.

> GZIP 또는 Brotli 압축

서버에서 HTML, CSS, JavaScript 파일을 GZIP이나 Brotli 같은 압축 형식으로 전송하면 네트워크를 통해 전송되는 데이터 양을 줄일 수 있습니다. 압축된 파일은 브라우저에서 해제된 후 렌더링됩니다.

> 브라우저 캐싱

브라우저 캐시를 활용하면 사용자가 동일한 웹 페이지에 재방문할 때 이미 다운로드된 리소스를 재사용할 수 있습니다. 이를 위해 HTTP 헤더에서 Cache-Control이나 ETag 등을 설정하여 파일의 만료 기간을 지정할 수 있습니다.

4) 리플로우와 리페인트 최소화

리플로우(Reflow)와 리페인트(Repaint)는 웹 페이지 성능에 영향을 미치는 중요한 렌더링 이벤트입니다. DOM 요소의 레이아웃이 변경되면 리플로우가 발생하고, 스타일이나 레이아웃에 변화가 생기면 페인트 단계가 다시 실행됩니다. 리플로우와 리페인트는 많은 자원을 소모하므로 이를 최소화하는 것이 좋습니다.

> DOM 접근 최소화

DOM에 직접 접근하거나 조작하는 횟수를 줄이면 불필요한 리플로우를 줄일 수 있습니다. 예를 들어, 여러 번 DOM을 조작해야 한다면, 조작 전 모든 변경 사항을 수집한 후 한 번에 반영하는 것이 좋습니다.

> 클래스 추가/제거

스타일을 변경할 때는 개별 스타일 속성을 변경하는 대신, 스타일이 미리 정의된 클래스를 추가하거나 제거하는 것이 더 효율적입니다.

> 문서 조각(Document Fragment) 사용

여러 요소를 DOM에 추가할 때는 각 요소를 개별적으로 추가하는 대신, DocumentFragment를 사용하여 한 번에 추가할 수 있습니다. 이렇게 하면 리플로우를 여러 번 발생시키는 대신, 한 번만 발생시킬 수 있습니다.

5) 비동기 처리와 Web Worker 활용

JavaScript는 단일 스레드로 동작하기 때문에, 무거운 연산이 실행되면 UI 스레드가 차단되어 사용자가 느끼는 응답성이 떨어질 수 있습니다. 이를 방지하기 위해 비동기 처리와 Web Worker를 활용할 수 있습니다.

> 비동기 처리

Promise나 async/await를 사용하면 비동기적으로 작업을 수행할 수 있으며, UI 스레드가 차단되지 않도록 할 수 있습니다. 특히 네트워크 요청, 파일 읽기 등 시간이 오래 걸리는 작업은 비동기로 처리하는 것이 좋습니다.

> Web Worker

Web Worker는 메인 스레드와는 별도로 백그라운드에서 JavaScript 코드를 실행할 수 있는 기능입니다. 이를 통해 무거운 작업을 메인 스레드와 분리하여 실행함으로써 UI 성능을 유지할 수 있습니다.

5. 자주 발생하는 렌더링 이슈와 해결 방법

렌더링 과정에서 발생할 수 있는 다양한 이슈를 이해하고 이를 해결하는 방법을 아는 것은 성능 최적화에 매우 중요합니다.

✅ FOUC(Flash of Unstyled Content)

FOUC는 페이지가 로드될 때 CSS가 제대로 적용되지 않아 사용자가 스타일 없는 페이지를 잠시 보는 현상입니다. 이는 CSS 파일이 느리게 로드되거나 JavaScript가 스타일 적용을 지연시킬 때 발생합니다.

이를 해결하기 위해서는 CSS 파일을 우선적으로 로드하거나, 서버사이드 렌더링(SSR)을 사용해 초기 HTML에 CSS를 포함시키는 방법이 있습니다. 또한, <style> 태그를 사용해 중요한 스타일을 인라인으로 작성하는 것도 도움이 될 수 있습니다.

✅ CLS(Cumulative Layout Shift)

CLS는 페이지가 로드되면서 레이아웃이 갑작스럽게 변경되는 현상을 말합니다. 이는 사용자가 페이지와 상호작용하는 동안 요소들이 이동하여 사용 경험을 해칠 수 있습니다.

CLS를 방지하려면 이미지나 비디오 같은 미디어 요소에 고정된 크기를 지정하고, 동적으로 삽입되는 요소들의 레이아웃 변화를 최소화하는 것이 중요합니다. 또한, 광고나 서드파티 콘텐츠가 로드되면서 레이아웃이 변경되지 않도록 설계해야 합니다.

브라우저 렌더링 과정은 복잡하지만, 이를 잘 이해하고 적절히 최적화하면 웹 페이지의 성능과 사용자 경험을 크게 개선할 수 있습니다. HTML 파싱부터 시작하여 DOM과 렌더 트리 생성, 레이아웃 계산, 페인트, 합성, JavaScript 실행 등 모든 단계에서 성능을 최적화하는 방법을 적용하면 브라우저가 페이지를 더 빠르고 효율적으로 렌더링할 수 있습니다.

브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari