network

[NetWork] 브라우저에 www.naver.com을 입력하면 일어나는 일

하나쓰 2024. 1. 22. 08:00
728x90
반응형

브라우저에 www.naver.com을 입력하면 어떤 일들이 일어날까?

  1. 유저가 브라우저에 url을 입력함

url(Universal Resource Locator)이란?
서버에 자원을 요청하기 위해 입력하는 영문주소

  1. DNS(domain name system) 조회

DNS는 브라우저가 리소스를 로드할 수 있도록 도메인 이름을 IP주소로 변환함
우선 브라우저는 로컬에 DNS 캐시가 있는지 살펴보고 없으면 ISP(ex: SK 브로드밴드, KT 등)의 DNS 서버에 해당 도메인 이름에 해당하는 IP 주소를 요청함
그러면 DNS 서버는 도메인 이름에 해당하는 IP 주소를 찾아 반환함

  1. 브라우저는 이렇게 얻은 IP주소를 사용해 서버와 통신하기 위해 TCP 연결을 함.

이 과정에서 3-way-handshake가 이루어짐(이를 통해 서버와 연결 및 데이터를 수신 받을 수 있게됨)


3-way-handshake란?
TCP 통신을 사용해 데이터를 전송하기 위해 네트워크 연결을 설정하는 과정

  1. 클라이언트는 서버에 접속을 요청하는 SYN 패킷 전송
  2. 서버는 SYN 요청을 받고 클라이언트에게 요청을 수락한다는 SYN_ACK-flag가 설정된 패킷 전송
  3. 클라이언트는 서버에게 ACK를 전송 후 연결이 이루어짐 -> 데이터를 주고 받을 수 있게 됨

  1. 브라우저는 설정된 TCP 연결을 통해 서버에 HTTP 요청 보냄
  2. 서버는 요청을 처리 후 응답을 보냄
  3. 브라우저는 응답을 수신 후 렌더링함(브라우저 렌더링)

브라우저 렌더링이란?

서버로부터 받은 HTML, CSS, JS 등의 리소스를 다운 받음 → 브라우저가 이 리소스들을 사용해 화면에 그리는 과정을 브라우저 렌더링이라 함

  1. DOM을 생성함

브라우저는 HTML을 파싱해 돔트리를 생성함. HTML 안에 있는 태그들을 노드로 변환하고 마치 나무처럼 계층 관계를 형성함(그래서 돔트리)

  1. CSSOM 생성

브라우저는 css 파일(혹은 link태그나 내부 style 태그)을 파싱해 cssom 트리를 생성함. 돔트리와 마찬가지로 css 속성을 노드로 변환하고 노드 간의 계층 관계를 형성함

  1. 렌더트리 생성

돔트리와 cssom 트리를 결합해 렌더트리를 형성함. 이때 실제 화면에 표시될 요소만을 선택해 렌더트리를 만듦

  1. 레이아웃(리플로우)

렌더트리에 있는 노드들의 위치와 크기를 계산하는 단계로 정확한 크기와 위치를 계산함

  1. 페인트(리페인트)

계산된 값들을 기반으로 화면에 필요한 요소들을 실제로 그리는 작업을 실행함
이때 레이아웃 단계에서 계산된 모든 위치, 크기를 실제 픽셀로 변환해 화면에 출력함

  1. 합성

페인트단계에서 만든 레이어들을 합성하는 단계임
이 과정에서 GPU가 사용되는 경우가 많다고 함
GPU란 그래픽 처리 장치로 컴퓨터에서 이미지를 빠르게 계산하여 화면에 표시하는 역할을 함
GPU를 사용해 CPU의 부하를 줄이고 좀 더 빠르게 렌더링을 할 수 있음
transform이나 opacity 등의 속성은 바로 이 과정으로 넘어옴(리플로우, 리페인트 과정 없이)→ 좀 더 부드럽게 처리될 수 있음


리페인트, 리플로우란?
기존 생성한 레이아웃이 사용자와의 인터랙션이나 이벤트로 인해 변경되면, 브라우저는 렌더트리를 다시 생성하고 레이아웃 과정을 다시 수행함 (리플로우)
리플로우는 변경사항을 반영하기 위해 수행되고, 실제 그 결과를 화면에 나타나게 하려면 다시 페인팅 단계를 수행해야함(리페인트)
따라서 리플로우가 일어나면 반드시 리페인트도 일어남. 하지만 레이아웃의 영향이 없는 변경(ex: 색상 변경)은 리플로우없이 리페인트만 실행함

반응형