브라우저의 동작 방식 요약 (MDN Docs)

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

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

 

브라우저는 어떻게 동작하는가

 

사용자는 로드가 빠르고 상호작용이 원활한 컨텐츠로 이루어진 웹 경험을 원합니다.

따라서 개발자는 이 두가지 목표를 달성하기 위해서 부단히 노력해야합니다.

 

실제 성능 및 체감되는 성능을 향상시키는 방법을 이해하기 위해서 브라우저가 어떻게 동작하는지 이해하는 것이 도움이 됩니다.

 

---

 

웹 성능에 있어서 두 가지 주요한 문제는 지연시간과

브라우저가 대부분 싱글 쓰레드로 동작한다는 점입니다.

 

빠른 로딩을 하는데 있어서 지연시간은 이겨내야할 중요한 문제입니다.

 

네트워크 지연시간은 네트워크를 통해 컴퓨터로 바이트를 전송하는데 걸리는 시간을 의미합니다. 웹 최적화는 페이지 로드가 최대한 빠르게 이루어 질 수 있도록 하는 것입니다.

 

대부분 브라우저는 싱글 쓰레드입니다. 원활한 상호작용을 위한 개발자의 목표는 부드러운 스크롤부터 매우 기민하게 반응하는 터치에 이르기까지 성능이 뛰어난 상호 작용을 보장하는 것입니다.

 

메인 쓰레드가 요청된 모든 작업을 수행하면서도 유저와의 상호작용에 반응 할 수 있도록 보장하기 위해서는 렌더링 시간이 가장 중요합니다.

 

브라우저가 싱글 쓰레드로 동작한다는 점을 이해하고 가능한 메인 쓰레드의 책임을 줄여주는 방식으로 웹 성능 향상을 이룰 수 있습니다.

 

---

 

▶ 탐색 (Navigation) :

웹페이지를 로딩하는 첫 단계

 

1. DNS 조회 (DNS Lookup) : 해당 페이지의 자원이 어디에 위치하는지

 

2. TCP 핸드셰이크 (TCP Handshake) : 브라우저는 서버와 TCP 3방향 핸드셰이크를 통해 연결을 설정

 

3. TLS 협상 (TLS Negotiation) : 보안성있는 연결을 위한 또 다른 "핸드셰이크"

 

---

 

▶ 응답 (Response) :

서버가 요청을 받으면, 관련 응답 헤더와 함께 HTML의 내용을 응답

 

1. 혼잡 제어 (Congestion control) , TCP 슬로우 스타트 (TCP Slow Start) :

전송되는 세그먼트 수의 균형을 맞추기 위해 TCP 슬로우 스타트 알고리즘을 사용

 

2. 구문 분석 (Parsing) : 브라우저가 수신된 정보룰 구문 분석

 

3. DOM 트리 구축 (Building the DOM tree) : 중요한 렌더링 경로 설명

 

4. 프리로드 스캐너 (Preload scanner) : 사용 가능한 컨텐츠를 분석하고 우선순위가 높은 자원을 요청

 

5. CSSOM 구축 (Building the CSSOM) : CCSOM 트리는 사용자 에이전트의 스타일 시트를 포함

 

6. 다른 작업들 (Other Processes) :

 

- Javascript 컴파일 (JavaScript Compilation)

 

- 접근성 트리 구축 (Building the Accessibility Tree)

 

---

 

▶ 렌더 (Render) :

스타일, 레이아웃, 페인트 그리고 때때로 합성이 포함

 

1. 스타일 (Style) : DOM과 CSSOM을 합쳐 렌더 트리 만들기

 

2. 레이아웃 (Layout) : 렌더 트리에 있는 모든 노드의 너비, 높이, 위치를 결정하는 프로세스

 

3. 페인트 (Paint) : 각 노드를 화면에 페인팅

 

4. 합성 (Compositing) : 정확한 렌더링을 보장하기 위해 합성이 필요

 

---

 

▶ 상호작용 (Interactivity) :

 

메인 쓰레드가 페이지를 그리는 것을 완료하면, 모든 것이 준비되었다고 생각할 수도 있습니다.

 

하지만 꼭 그렇지는 않습니다.

 

만약 지연된 Javascript를 다운했다면, 그리고 onload 이벤트가 발생할 때 코드가 실행된다면, 메인 쓰레드는 여전히 바쁠 것입니다.

 

그래서 스크롤링, 터치 등 다른 상호작용이 불가능 할 것입니다.

 

Time to Interactive (TTI) 는 DNS 조회와 SSL 연결이 이루어지는 첫 요청부터 페이지가 상호작용할 준비가 될 때까지 얼마나 걸리는지를 측정하는 단위입니다.

 

첫 번째 콘텐츠가 포함된 페인트 이후 페이지가 사용자와의 상호작용에 50ms 이내로 응답할 때를 상호 작용 가능한 시점으로 봅니다.

 

만약 메인 쓰레드가 구문 분석, 컴파일, Javascript 실행에 사용되고 있다면, 메인 쓰레드를 사용할 수 없고,

 

따라서 사용자 상호작용에 50ms 이내로 적절하게 반응하지 못합니다.

 

예제 (MDN Docs 참고)에서, 이미지는 매우 빠르게 로드됩니다.

 

하지만 만약 예제의 js 파일이 2MB였고 사용자의 네트워크 연결이 느렸다면 어땠을까요?

 

이 경우에는 사용자는 페이지는 매우 빠르게 볼 수 있지만 스크립트가 다운로드되고,

분석되고 실행되기 전까지는 버벅이는 스크롤을 할 수 밖에 없을 것입니다.

 

이는 좋은 사용자 경험이 아닙니다.

 

WebPageTest 예시 (MDN Docs 참고) 에서 볼 수 있듯이,

메인 쓰레드를 점유하는 것을 피하세요.

 

---

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

MDN Docs 문서를 참고하여 작성하였습니다.