웹 개발하는 개발자라면 우리가 개발한 서비스가 어떻게 클라이언트에게 전달되는 메커니즘을 이해하고 있어야하는게 당연하겠지. 하지만 여태 너무 모르고 있었다. 반성하며 조금 적어본다.
우리가 주소창에 google.com을 입력하면 아래 과정이 진행된다.
1. DNS 요청
브라우저 캐시에서 1차 조회, 이후 운영체제 레벨의 DNS캐시에서 없으면 DNS 서버에 요청을 해서 google.com의 서버 IP를 리턴받는다.
2. TCP 연결 수립
TCP(Transmission control protocol) 연결하며 3 Way handshake 발생
3. HTTP 프로토콜
GET 요청
4. 로드밸런서
로드밸런서가 웹서버로 분산 연결
5. 웹서버
주로 정적인 데이터 처리 담당(HTML,CSS, 이미지)
6. 어플리케이션 서버
동적인 처리 담당 (JS)
처리 후 웹서버로 전달해주면 웹서버는 브라우저에게 HTTP Response료 요청한 리소스들과 헤더를 포함해서 리턴한다.
7. 렌더링
CRP (Critical Rendering Path)의 과정을 통해 브라우저에서 렌더링
CRP는 6단계로 다음과 같음
1) DOM 트리
2) CSSOM 트리
3) JS 실행
4) 렌더트리
5) 레이아웃 생성
6) 페인팅
그림으로 보면 아래와 같다
참고자료
https://velog.io/@tnehd1998/%EC%A3%BC%EC%86%8C%EC%B0%BD%EC%97%90-www.google.com%EC%9D%84-%EC%9E%85%EB%A0%A5%ED%96%88%EC%9D%84-%EB%95%8C-%EC%9D%BC%EC%96%B4%EB%82%98%EB%8A%94-%EA%B3%BC%EC%A0%95 (추천)
https://leeph.tistory.com/39
