어? 근데 왜 웹 브라우저를 꾸미고 왜, 어떻게 서버랑 연결하냐?
궁금하지않으신가요
저는 궁금했습니다. 네
1. navigation
웹페이지 로딩 첫 단계..
URL을 입력하거나 링크를 클릭하거나 form을 제출했을 때 일어나는 첫번째 일
웹 최적화를 할 때 이 navigation 완료 시간 최소화가 목표임
-
DNS 조회
처음 방문하는 사이트의 IP주소를 DNS서버에서 찾음.
후속 방문 시에는 DNS까지 갈 필요 없고 그냥 캐시에서 가져옴.
시간 단축 굿굿 -
TCP 3 way 핸드셰이크
IP 프로토콜 만으로도 서버와 슥삭 연락이 가능함. 출발 ip, 도착ip, 내용만으로도 서버에 연락할 수 있다는 것. 하지만 비연결성, 비신뢰성, 프로그램 구분의 어려움 이라는 단점들이 있음.
그래서 TCP 전송제어 프로토콜을 하나 더 씀. 얘를 쓰면
비연결성 문제 해결, 데이터 연결보증, 순서 보장(최적화) 등이 되는 아주 마법같은 존재임.
서버에 SYN(접속 요청)하면 서버가 클라에 SYN+ACK(요청 수락)이라고 오고 클라는 ACK(데이터도 같이 히히)라고 보냄. 그럼 가상연결완료! -
TLS 협상
HTTP에 보안이 추가된 것이 HTTPS임. 근데 보안이라함은 즉 암호화 아닐까요? 요즘같은 시대에 아주 당연하게 이 HTTPS를 씀. 그럼 통신암호화에 쓸 암호를 결정하고 서버를 확인하는 일을 이 TLS negotiation 즉 TLS 협상이라고 함.
2. 응답
연결이 성립된 후에 HTTP GET reguest 메세지를 보냄. 이 GET이라는 건 HTTP메서드인데, 각 메서드마다 정해진 임무들이 있음. 그건 나중에 따로 한번 더 정리해보기로..
이 응답을 통해 응답헤더 + HTML 내용을 받음.
3. 구문분석
브라우저가 네트워크를 통해 서버로부터 받은 데이터를 DOM(html), CSSOM(css)로 바꾸는 과정임.
프리로드 스캐너라는 것이 등장하는데.. 기본적으로 자바스크립트는 싱글스레드! 즉 코드를 읽는 주체(=스레드)가 하나라는거임. 이걸 보통 메인스레드라고 함. 이 메인스레드가 열심히 DOM트리를 만드는 동안 우선순위가 높은 리소스들을 이 프리로드 스캐너가 읽게 됨. 우선순위가 높은 리소스라하면 CSS, JS 등이 있음.
또한 JS 컴파일, AOM(접근성 객체모델)도 구축함
4. 렌더
자 구문 분석이 끝난 DOM tree 와 CSSOM tree를 합성하여 렌더트리를 만들어야함. 이 렌더 트리는 웹페이지의 스타일, 레이아웃 계산을 한 후에 화면에 요소들을 페인팅함.
5. 상호작용
음.. 사실 이건 더 찾아봐야함. 정확히 무슨 과정인지 모르겠음.
DNS서버 연결요청부터 SSL연결완료까지 걸리는 시간을 측정하는거임. 근데 이 시간이라는건 메인스레드가 얼마나 잡일까지 도맡아하며 고생했느냐는 지표인데, 이걸 메인스레드 점유율이라고 함. 당연히 메인스레드의 점유율이 낮을수록 잡일은 잡부가 하니까 시간이 덜 들 것임.
