웹 브라우저의 동작 원리
✅ 사용자가 원하는 웹
로드가 빠르고 상호작용이 원활해야 한다.
⚠️ 웹 성능에서의 두가지 이슈
- 지연 시간(latency)
여기서 지연 시간에 가장 영향을 많이 주는 것은 렌더링 시간이다. 따라서 렌더링 시간을 줄이는 것이 웹 성능 향상의 핵심이다. - 브라우저가 대부분 싱글 스레드로 동작
브라우저가 싱글 스레드로 동작하는 이유는, 단일 프로세스의 멀티 스레드로 동작할 경우 한 탭에 문제가 생기면 다른 탭에도 연속적으로 문제가 발생할 수 있기 때문이다.
Navigation(탐색)
사용자가 URL이나 링크를 통해 웹페이지를 요청할 때 페이지를 로딩하는 첫 단계이다.
사용자가 페이지를 요청하는 경우, 네트워크 상에서는 아래와 같은 일이 발생한다.
1️⃣ DNS 조회
보통 우리는 웹페이지에 접속할 때 IP주소가 아닌 www.example.com과 같은 도메인 주소를 통해 접속한다. DNS는 이 도메인 주소 - IP 주소를 매핑한 전화번호부라고 할 수 있다. 자주 사용하는 사이트의 경우 IP 주소가 일정기간 캐싱되지만, 처음 접속하는 경우 이 DNS 서버에 IP 주소를 요청해야 한다.
2️⃣ TCP Handshake
IP 주소를 받으면, 서버와의 안정적인 연결을 위해 TCP Handshake를 진행한다.
3️⃣ TLS 협상
보안을 위한 키 교환을 한번 더 진행한다.
Response(응답)
웹 서버와 연결 후, 브라우저는 HTTP GET 요청을 보내 HTML 파일을 로드한다.
CRP(Critical Rendering Path)
브라우저가 HTML, CSS, JavaScript를 픽셀로 전환하는 단계를 말한다.
CRP는 크게 아래 5가지 단계로 설명할 수 있다.
1️⃣ DOM
DOM이란 Document Object Model의 약자로 HTML 또는 XML기반의 문서와 상호작용하는 API이다.
이 단계는 브라우저가 네트워크를 통해 바이트 스트림 데이터 형식으로 받은 HTML 문서를 파싱하는 단계이다. 이 과정에는 HTML 토큰화와 트리 구축이 포함된다.
토큰화
토큰화는 말 그대로 HTML 문서를 토큰으로 나누는 과정이다. HTML 토큰에는 시작태그, 종료태그, 속성값 등이 있다. 예를 들어 아래와 같은 코드가 있다고 할 때
<p class="intro">Hello</p>시작 태그 토큰: <p class= "intro">
텍스트 토큰: Hello
종료 태그 토큰: </p>
이런식으로 파싱하게 된다.
DOM 트리 구축
위에서 파싱된 토큰을 DOM 노드로 변환하여 트리를 생성하는 과정이다. 트리는 아래와 같이 생성되며 점진적으로 증가하는 형태이다.
DOM과 Javascript
생성된 DOM은 Javascript에 의해 변경될 수 있다. 이를 통해 웹 페이지의 내용, 구조, 스타일을 실시간으로 바꾸는 것이 가능하며, 이는 사용자 인터랙션을 구현하는 데 핵심적인 역할을 한다.
2️⃣ CSSOM
DOM이 빌드되었다면, CSS파일을 CSSOM(CSS Object Model)로 변환하는 과정을 거치게 된다. CSSOM 역시 DOM과 마찬가지로 트리 형태로 구축된다.
파싱은 <link rel="stylesheet"> 이나 <style>와 같은 태그를 만나면 시작된다.
‼️ 이때 브라우저는 CSSOM이 완성되기 전까지는 렌더링하지 않는다.
CSSOM 생성 중간에 렌더링하게 되면 레이아웃이 갑자기 바뀌는 문제가 발생할 수 있기 때문이다. 따라서 CSS는 렌더링 차단 리소스로 렌더링 성능에 영향을 미칠 수 있다.
3️⃣ Render Tree
DOM과 CSSOM이 생성되었다면, 이 둘을 결합하여 Render Tree를 생성한다. 렌더 트리는 아래와 같은 규칙들을 바탕으로 생성된다.
✅ display: none → Render Tree에 포함 ❌
✅ visibility: hidden → Render Tree에 포함 ⭕, Print ❌
📌 렌더 트리 생성 과정
-
DOM 트리와 CSSOM 트리를 순회
-
화면에 보이는 요소만 필터링
-
각 요소에 적용될 계산된 스타일(computed style) 결정
📌 캐스케이딩(CSS Cascade)
여러 개의 CSS 규칙이 하나의 요소에 적용될 때, 어떤 스타일이 최종적으로 적용될지를 결정하는 원칙
이 경우 브라우저는 우선순위, 명시도(specificity), 출처를 고려해 최종 스타일을 계산한다. 이 최종 계산 결과가 렌더 트리에 적용되는 스타일이 된다.
4️⃣ Layout
Render Tree를 바탕으로 요소들의 위치, 크기 등을 계산한다.
🧐 Reflow(리플로우)
처음에 수행되는 배치를 계산하는 것이 Layout이라면, 이후 요소 크기나 위치가 변경되어 다시 계산되는 것을 Reflow라고 한다.
그래서 이미지의 크기를 명시하지 않으면, 브라우저는 초기 레이아웃 단계에서 공간만 확보하고, 이후 다시 사이즈를 계산하는 리플로우가 발생한다. 이는 레이아웃을 다시 계산하게 되어 성능에 영향을 줄 수 있다.
5️⃣ Paint
레이아웃에서 계산된 요소들을 화면에 픽셀로 화면에 렌더링한다. 페인팅에는 텍스트, 배경색, 테두리, 그림자, 이미지, 버튼 등이 포함된다.
📌 Layer와 합성(Composite)
브라우저는 성능 향상을 위해 일부 요소를 레이어(layer)로 나눠서 처리하기도 한다.
레이어를 별도로 페인트하고, 나중에 GPU가 합성(compositing)하는 방식이다.
이렇게 하면 전체 페이지가 아닌 일부만 다시 그릴 수 있어 성능 향상 가능하다.
참고: MDN - How browsers work
