웹 브라우저의 렌더링 과정 이해하기

우리가 웹사이트에 접속할 때, 브라우저는 복잡한 과정을 통해 웹페이지를 화면에 표시합니다. 이 과정은 '렌더링'이라고 불리며, 여러 단계로 나누어져 있습니다. 웹 브라우저가 어떻게 웹페이지를 렌더링하는지 알아보겠습니다.

 

---

1. HTML 파싱과 DOM 생성
첫 번째 단계는 서버로부터 HTML 문서를 받아오는 것입니다. 브라우저는 이 HTML 문서를 바탕으로 'DOM(Document Object Model)'을 생성합니다. DOM은 HTML 문서의 구조를 트리 형태로 표현한 것으로, 각 노드는 HTML 요소를 나타냅니다. 예를 들어, `<div>`나 `<p>` 같은 태그들이 각각 DOM의 노드가 됩니다.

2. CSS 파싱과 스타일 계산
다음 단계는 CSS를 파싱하는 것입니다. 브라우저는 HTML 파일 내의 `<style>` 태그 또는 링크된 CSS 파일을 분석하여 스타일 규칙을 파악합니다. 이 과정을 통해 각 DOM 요소에 어떤 스타일이 적용될지를 결정합니다. 이를 '스타일 계산'이라고 합니다. 이 과정에서 상속과 같은 CSS의 규칙이 적용되어 최종적으로 요소에 적용될 스타일이 확정됩니다.

3. 렌더 트리 구성
HTML의 구조와 CSS의 스타일 정보를 결합하여 '렌더 트리'를 만듭니다. 렌더 트리는 실제 화면에 표시될 요소들만 포함하며, DOM과는 약간 다른 구조를 가집니다. 예를 들어, `display: none;`이 적용된 요소는 렌더 트리에서 제외됩니다. 렌더 트리의 각 노드는 화면에 어떻게 그려질지에 대한 정보를 담고 있습니다.

4. 레이아웃(배치) 계산
이제 브라우저는 렌더 트리를 기반으로 각 요소의 위치와 크기를 계산합니다. 이 과정은 '레이아웃' 또는 '리플로우'라고도 합니다. 여기서 브라우저는 각 요소가 페이지 내에서 어떻게 배치될지를 결정하고, 페이지의 전체 구조를 완성합니다. 특히, 요소들이 서로 겹치거나 배치되는 방식에 따라 이 과정은 복잡해질 수 있습니다.

5. 페인팅(Painting)
레이아웃이 완료된 후, 브라우저는 각 렌더 트리 노드를 화면에 그리는 '페인팅' 단계를 수행합니다. 이 단계에서는 텍스트, 색상, 그림자, 이미지 등의 스타일이 실제로 픽셀로 변환되어 화면에 표시됩니다. 페인팅은 GPU(그래픽 처리 장치)를 활용해 성능을 최적화하기도 합니다.

6. 합성(Compositing)
최종 단계는 '합성'입니다. 페인팅이 완료된 후, 브라우저는 레이어를 병합하여 최종적으로 화면에 표시할 이미지를 생성합니다. 여러 개의 레이어를 병합하는 이유는 성능 최적화를 위해서입니다. 브라우저는 일부 레이어만 다시 그리는 방식으로, 전체 페이지를 다시 그리지 않고도 효율적으로 화면을 업데이트할 수 있습니다.

---

 

결론

 

브라우저의 렌더링 과정은 매우 복잡하지만, 이 과정을 이해하면 웹 개발 시 성능 최적화와 디버깅에 큰 도움이 됩니다. HTML 파싱부터 합성까지의 각 단계를 이해함으로써, 웹페이지가 사용자에게 어떻게 전달되는지, 그리고 왜 특정 코드가 성능에 영향을 미치는지를 명확히 파악할 수 있습니다.

 

 

---

참고

https://developer.mozilla.org/ko/docs/Web/Performance/How_browsers_work

웹페이지를 표시한다는 것: 브라우저는 어떻게 동작하는가 - 웹 성능 | MDN