[NetWork] 브라우저에 www.naver.com을 입력하면 일어나는 일
브라우저에 www.naver.com을 입력하면 어떤 일들이 일어날까?
- 유저가 브라우저에 url을 입력함
url(Universal Resource Locator)이란?
서버에 자원을 요청하기 위해 입력하는 영문주소
- DNS(domain name system) 조회
DNS는 브라우저가 리소스를 로드할 수 있도록 도메인 이름을 IP주소로 변환함
우선 브라우저는 로컬에 DNS 캐시가 있는지 살펴보고 없으면 ISP(ex: SK 브로드밴드, KT 등)의 DNS 서버에 해당 도메인 이름에 해당하는 IP 주소를 요청함
그러면 DNS 서버는 도메인 이름에 해당하는 IP 주소를 찾아 반환함
- 브라우저는 이렇게 얻은 IP주소를 사용해 서버와 통신하기 위해 TCP 연결을 함.
이 과정에서 3-way-handshake가 이루어짐(이를 통해 서버와 연결 및 데이터를 수신 받을 수 있게됨)
3-way-handshake란?
TCP 통신을 사용해 데이터를 전송하기 위해 네트워크 연결을 설정하는 과정
- 클라이언트는 서버에 접속을 요청하는 SYN 패킷 전송
- 서버는 SYN 요청을 받고 클라이언트에게 요청을 수락한다는 SYN_ACK-flag가 설정된 패킷 전송
- 클라이언트는 서버에게 ACK를 전송 후 연결이 이루어짐 -> 데이터를 주고 받을 수 있게 됨
- 브라우저는 설정된 TCP 연결을 통해 서버에 HTTP 요청 보냄
- 서버는 요청을 처리 후 응답을 보냄
- 브라우저는 응답을 수신 후 렌더링함(브라우저 렌더링)
브라우저 렌더링이란?
서버로부터 받은 HTML, CSS, JS 등의 리소스를 다운 받음 → 브라우저가 이 리소스들을 사용해 화면에 그리는 과정을 브라우저 렌더링이라 함
- DOM을 생성함
브라우저는 HTML을 파싱해 돔트리를 생성함. HTML 안에 있는 태그들을 노드로 변환하고 마치 나무처럼 계층 관계를 형성함(그래서 돔트리)
- CSSOM 생성
브라우저는 css 파일(혹은 link태그나 내부 style 태그)을 파싱해 cssom 트리를 생성함. 돔트리와 마찬가지로 css 속성을 노드로 변환하고 노드 간의 계층 관계를 형성함
- 렌더트리 생성
돔트리와 cssom 트리를 결합해 렌더트리를 형성함. 이때 실제 화면에 표시될 요소만을 선택해 렌더트리를 만듦
- 레이아웃(리플로우)
렌더트리에 있는 노드들의 위치와 크기를 계산하는 단계로 정확한 크기와 위치를 계산함
- 페인트(리페인트)
계산된 값들을 기반으로 화면에 필요한 요소들을 실제로 그리는 작업을 실행함
이때 레이아웃 단계에서 계산된 모든 위치, 크기를 실제 픽셀로 변환해 화면에 출력함
- 합성
페인트단계에서 만든 레이어들을 합성하는 단계임
이 과정에서 GPU가 사용되는 경우가 많다고 함
GPU란 그래픽 처리 장치로 컴퓨터에서 이미지를 빠르게 계산하여 화면에 표시하는 역할을 함
GPU를 사용해 CPU의 부하를 줄이고 좀 더 빠르게 렌더링을 할 수 있음
transform이나 opacity 등의 속성은 바로 이 과정으로 넘어옴(리플로우, 리페인트 과정 없이)→ 좀 더 부드럽게 처리될 수 있음
리페인트, 리플로우란?
기존 생성한 레이아웃이 사용자와의 인터랙션이나 이벤트로 인해 변경되면, 브라우저는 렌더트리를 다시 생성하고 레이아웃 과정을 다시 수행함 (리플로우)
리플로우는 변경사항을 반영하기 위해 수행되고, 실제 그 결과를 화면에 나타나게 하려면 다시 페인팅 단계를 수행해야함(리페인트)
따라서 리플로우가 일어나면 반드시 리페인트도 일어남. 하지만 레이아웃의 영향이 없는 변경(ex: 색상 변경)은 리플로우없이 리페인트만 실행함