간단하게 순서 먼저 알아보기
- www.naver.com 입력
- 리다이렉트 확인
- 캐싱 확인
- DNS 확인
- IP 라우팅, ARP 서버 탐색
- HTTP 버전에 따른 연결
- 컨텐츠 다운로드
- 브라우저 렌더링
여기서 1 ~ 7번 과정을 TTFB(Time To First Byte) 라고도 한다.
이는 첫 바이트를 다운로드 시작할 때까지의 시간을 나타내는 용어이다.
1. 브라우저 주소 창에 주소를 입력한다
www.naver.com
2. 리다이렉트를 확인한다
- 리다이렉트가 있다면 리다이렉트를 진행한다.
- 없다면 해당 요청에 대한 과정을 진행한다.
3. 캐싱을 확인한다
- 해당 요청이 캐싱이 가능한지 여부를 먼저 파악한다.
- 캐싱이 이미 된 요청이라면 캐싱된 값을 반환한다.
- 아니라면 그 다음 단계를 진행한다.
캐싱은 요청된 값의 결과물을 저장하고 그 값을 다시 요청하면 다시 제공하는 기술이다.
이는 브라우저 캐시와 공유 캐시로 나누어진다.
브라우저 캐시
- 쿠키, 로컬 스토리지 등을 포함한 캐시이다.
- 브라우저 자체가 사용자가 HTTP를 통해 다운로드하는 모든 문서를 보유하는 것을 말한다.
- HTTP 304 상태 코드가 나온다면 캐시된 데이터를 이용한 것이다.
공유 캐시
- 클라이언트와 서버 사이에 있으며 사용자 간에 공유할 수 있는 응답을 저장할 수 있다.
- 대표적인 예시로 요청한 서버 앞단에 프록시 서버가 캐싱하는 것을 말한다.
- 이를 리버스 프록시를 둬서 내부 서버로 포워드한다고 말한다.
- 공유 캐시가 문지기 역할을 하여 origin 서버의 부담을 줄인다.
4. DNS(Domain Name System) 확인
- URL 주소를 IP로 바꿔주는 시스템이다.
- DNS 관련 요청을 네임 서버로 전달하여 해당 응답값을 클라이언트에게 반환한다.
DNS 캐싱
- 미리 해당 도메인 이름을 요청했다면 로컬 PC에 자동적으로 저장한다.
5. IP 라우팅
- 해당 IP를 기반으로 라우팅한다.
- ARP 과정을 거쳐 실제 서버를 찾는다.
6. TCP 연결 구축
- 브라우저가 3-way handshake 및 SSL 연결 등을 통해 연결을 설정한다.
- 이후 요청을 보낸 후 해당 요청에 대한 서버의 응답을 받는다.
- HTTP/3 기준으로는 QUIC 연결을 진행한다.
3-way handshake (연결 설정)
- 클라이언트가 서버에 SYN 연결 요청을 보낸다.
- 서버는 SYN을 받고, 받았다는 응답 신호인 ACK와 SYN 패킷을 같이 보낸다.
- 클라이언트에서도 서버의 신호를 잘 받았다는 응답 신호인 ACK를 보냄으로써 총 3단계의 과정을 거친다.
4-way handshake (연결 해제)
- 클라이언트에서 서버로 해제 요청을 의미하는 FIN을 보낸다.
- 서버는 ACK 응답 신호를 먼저 보내고, 추후 해제 완료를 의미하는 FIN을 보낸다.
- 클라이언트는 FIN을 받아 확인했다는 ACK 신호를 보내는 총 4단계의 과정을 거친다.
7. 컨텐츠 다운로드
8. 브라우저 렌더링
받은 데이터를 바탕으로 브라우저 엔진이 브라우저 렌더링 과정을 거쳐 화면을 그린다.
브라우저 렌더링 원리
- 브라우저가 HTML을 받으면 그것을 토대로 DOM을 생성한다.
- CSS를 받으면 CSSOM을 생성한다.
- 이 과정에서
<script>를 만나면 렌더링이 중단된다.
<script> 태그는 마지막에 위치하거나 defer, async 설정을 권장한다.- DOM과 CSSOM이 합쳐져서 렌더 트리를 구성한다.
- 이후 Layout과 Paint 단계를 진행한다.
Layout과 Paint
- Layout: 요소의 크기나 위치를 계산하여 화면에 구성하는 단계
- Paint: 계산된 위치나 크기를 기반으로 화면에 그리는 단계
Reflow와 Repaint
JavaScript로 화면을 조작할 때 Reflow와 Repaint가 발생한다.
- Reflow → Layout이 변경될 때 발생
- Repaint → Paint가 변경될 때 발생
Reflow 발생 시 자식 요소들의 위치도 전부 변경되기 때문에 Reflow를 최소화하고 Repaint 위주로 동작하도록 최적화를 진행해야 한다.
Reflow 발생 조건
width, height, margin, padding 등과 같은 크기/위치가 변경되는 경우- JavaScript로 새로운 요소를 화면에 추가하거나 제거하는 DOM 조작이 이루어지는 경우
offsetWidth, offsetHeight 같은 기하학적 수치를 읽는 경우
Repaint 발생 조건
color, background-color 같은 색상이 변경되는 경우- Reflow가 발생하는 경우 (Reflow 발생 시 Repaint도 같이 동작)
렌더링 최적화
따라서 애니메이션 구현 시 Reflow를 유발하는 width, height 대신, GPU의 도움을 받아 Layout 계산을 건너뛰고 합성 단계만 거치는 transform 혹은 opacity 속성을 사용하여 렌더링 최적화를 진행해야 한다.
최종 정리
브라우저 주소 창에 www.naver.com을 입력하면, 먼저 리다이렉트 여부를 확인하고 브라우저 캐시 또는 공유 캐시에 해당 요청이 저장되어 있는지 확인합니다. 캐시가 없다면 DNS를 통해 도메인을 IP 주소로 변환하고, 해당 IP를 기반으로 라우팅 및 ARP 과정을 거쳐 실제 서버를 찾습니다. 서버를 찾으면 3-way handshake를 통해 TCP 연결을 설정하고, 필요에 따라 SSL/TLS 연결까지 수행합니다. HTTP/3 환경이라면 QUIC 프로토콜로 연결을 진행합니다. 연결이 완료되면 서버로부터 컨텐츠를 다운로드하는데, 여기까지의 과정을 TTFB(Time To First Byte)라고 합니다. 이후 브라우저는 받은 HTML로 DOM을, CSS로 CSSOM을 생성하고, 이 둘을 합쳐 렌더 트리를 구성합니다. 렌더 트리를 기반으로 Layout 단계에서 요소의 크기와 위치를 계산하고, Paint 단계에서 화면에 그리게 됩니다. 이때 성능 최적화를 위해 Reflow를 최소화하고, 애니메이션에는 transform이나 opacity 속성을 활용하여 GPU 가속을 통한 합성 단계만 거치도록 하는 것이 중요합니다.
댓글 0
