웹의 동작 원리

검색하다 잘 정리된 그림을 찾았다.

Google을 검색했을 때 일어나는 일

참고 :

목록에 해당 url이 있다면 HTTPS로 통신한다.

캐시는 리소스의 복사본을 저장하고 있다가 요청시 제공하는 기술이다. 캐시를 사용하면 리소스 회신시간이 단축되기 때문에 성능이 향상된다.
DNS는 Domain name에 대응하는 IP주소 혹은 그 역을 서로 변환시켜주는 DB시스템이다.

www.google.com에 접속하고 싶으면 IP주소를 알아야 한다. DNS query의 목적은 해당 사이트의 IP 주소를 찾는 것이다.

주소 결정 프로토콜인 ARP는 네트워크 상에서 IP주소를 MAC주소로 대응시키기 위해 사용된다.

IP는 장비의 인터페이스에 할당된 논리적 주소이고, 사용자 PC까지 메시지를 전달하기 위해서는 하드웨어에 할당된 고유 식별번호 주소인 MAC주소가 필요하다.

브라우저가 올바른 IP주소를 받게 되면 TCP 를 사용해 서버와 연결이 된다.

TCP/IP 3way handshake라는 프로세스를 통해 클라이언트-서버간 연결이 이루어진다.

TCP/IP 3way handshake 프로세스는 다음과 같다.

만약 HTTPS라면 TLS통신이 추가된다.

TLS는 보안통신을 가능하게하는 하나의 프로토콜인데 HTTP통신에 TLS보안통신이 더해진 프로토콜을 HTTPS라고 한다.

아래그림의 1~3까지는 TCP 3way handshake 프로세스이고, 그 뒤로 이어지는 과정(4~)는 TLS과정이다.

TLS는 통신을 수행하기 전에 먼저 암호화를 수행하기 위한 준비를 수행한다.
이러한 암호화를 수행하기 위해 각 사용자와 서버는 연결을 수행할 준비를 하고, 암호화를 수행할 알고리즘을 교환한다.
사용자는 서버와 암호화 통신을 수행하기 위해, 4번에서와 같이 자신이 사용할 수 있는 암호알고리즘 리스트를 전송한다. 그렇게 되면 서버에서 암호화에 사용할 알고리즘을 선택할 수 있게 된다.
암호화 통신은 중간자 공격을 받을 수 있다. 이러한 공격으로부터 안전하기 위해서는 제 3자에게 인증받은 인증서를 기반으로 통신한다.
그러므로 5~6번에서는 먼저, 정상적인 서버(인증받은 서버)인지 확인할 수 있는 인증서를 공유한다.
이후 인증이 정상적으로 완료되었다면, 암호화 통신에 사용할 암호 알고리즘을 최종적으로 교환한다.
위의 과정이 모두 정상적으로 완료되었다면, 이후부터는 암호화가 적용된 안전한 데이터 통신이 가능해진다.

클라이언트가 서버에 HTTP 프로토콜을 요청한다.(서버에 요청보낸다는 뜻)

클라이언트의 브라우저는 GET요청을 통해 서버에 www.google.com 웹페이지를 요구한다.

클라이언트가 서버에게 해당페이지를 달라고 get요청을 전달하면, 서버는 요청을 수락할 수 있는지 검사한 후 응답을 생성하여 브라우저에 전달

HTML,CSS를 다운받는다.
렌더링 엔진이 HTML을 DOM Tree, CSS를 CSSOM로 변환 (Parsing)
Render Tree 생성. Render Tree는 스타일정보가 설정되어 있고 실제 화면에 표시되는 노드들로 구성되어 있다.->display:none은 제외된다. (Style)
Lay Out : 브라우저의 뷰포트내에 각 노드들의 정확한 위치와 크기를 계산. 어느 위치에 어느 크기로 출력될지 계산 (Layout)
Paint : 계산된 값을 이용해 각 노드를 화면상의 실제 픽셀로 변환하고, 레이어를 만든다. (Paint)
레이어를 합성하여 실제 화면에 나타낸다. (Composite)

브라우저는 HTML content를 단계적으로 보여준다. 처음에는 HTML의 기본 틀을 렌더링하고, tag를 체크한다. 그 후 추가적인 CSS,JS등을 GET으로 요청한다. 이 정적파일(html,css,js)들은 캐싱되어 나중에 다시 서버로부터 불러와지지 않는다.

참고자료