브라우저 작동 원리

기본 원리

브라우저에 URL을 입력하면 서버가 브라우저에 페이지를 제공한다.

request, response

• request : 브라우저가 서버에 페이지를 달라고 하는 것
• response : 요청한 페이지를 브라우저에 제공하는 것
• Client : 요청하는 쪽
• Server : 요청을 받아 알맞은 데이터를 제공하는 쪽
  
  

DNS(Domain Name Server)

• 브라우저가 서버에 연결하려면 서버가 실행중인 컴퓨터의 IP 주소를 알아야 한다.

  • 도메인 이름을 IP 주소로 변환할 때 사용하는 것이 DNS이다.

• 브라우저에서 URL을 입력하면 브라우저는 도메인 이름에 해당하는 IP 주소를 DNS에 요청하고, DNS는 IP 주소를 응답으로 제공한다.

• IP 주소는 일정 기간 동안 캐시되어 이후 요청 속도를 높인다.

• 호스트명에 따라 DNS 조회가 각각 수행되므로 (ex. 글꼴, 이미지, 스크립트, 광고 등이 다른 호스트명을 갖고 있다면) 지연시간을 주의해야 한다.
  
  

TCP(Transmission Control Protocol)

• 데이터를 메세지 형태로 보내기 위해 IP와 함께 사용하는 프로토콜

• 신뢰적이고 연결지향성 서비스를 제공한다. (속도가 느리다.)

• IP는 배달을, TCP는 패킷의 추적 및 관리를 한다.

• 3-way handshaking으로 연결되고 4-way handshaking으로 해제된다.

• 브라우저는 DNS로부터 받은 IP 주소로 서버에 연결한 뒤 URL에 해당하는 페이지를 요청하고 응답받는다.
  
  

렌더링 과정

1. HTML 구문 분석을 통해 토큰화와 트리가 생성된다.

   • async 되지 않은 script 태그는 렌더링과 HTML 분석을 중지시킨다.

2. CSS를 처리해 CSSOM 트리를 생성한다.

   • 매우 빠른 속도로 진행되기 때문에 성능 향상에 기여할 수 있는 영역은 아니다.

3. DOM과 CSSOM을 합쳐 렌더 트리를 생성한다.

4. 렌더 트리를 기반으로 레이아웃을 실행한다.

5. 각 노드를 화면에 페인팅한다.
   
   
   

Reflow, Repaint

• Reflow : 노드의 크기나 위치를 다시 계산함
• Repaint : 리플로우된 렌더 트리를 다시 화면에 그려줌