- 설명1
- URL을 웹 브라우저의 주소창에 입력한다.
- 웹 브라우저가 URL을 해석하고, 문법에 맞지 않으면 기본 검색엔진으로 검색한다.
- 문법에 맞으면 URL의 호스트 부분을 인코딩한다.
- HSTS(HTTP Strict Transport Security) 목록을 확인하고 있으면 HTTPS로, 없으면 HTTP로 요청한다.
- DNS(Domain Name Server) 조회
- 브라우저/로컬 캐시 확인해서 도메인에 해당하는 IP가 있는지 확인한다.
- 없으면 OS에게 DNS 서버에 요청하라고 지시한다.
- DNS 서버는 해당 도메인에 해당하는 IP를 돌려준다.
- TCP 소켓을 열고 3-way handshake로 연결을 설정한다.
- HTTPS 요청이라면 TLS(Transport Layer Security) handshake 과정을 통해 세션키를 생성한다.
- 세션이 유지되는 동안 서버에게 요청하고 응답을 받는 과정을 반복한다.
- 응답 상태코드에 따라 다르게 처리한다.
- 응답을 디코딩(Decoding)하고 캐싱 가능하다면 캐싱한다.
- 웹브라우저는 응답받은 HTML/CSS/JS 및 이미지,폰트 등의 리소스를 사용하여 렌더링 한다.
- 서버와의 세션이 종료되면 4-way handshake로 연결을 종료한다.
- 설명2
- 사용자가 특정 페이지에 접속하여 HTML을 서버로부터 내려받으면, 브라우저의 렌더링 엔진에서는 이를 파싱한다.
- HTML 파싱을 진행하면서, DOM 트리를 만들게 되는데, 이 때 Link 태그를 만나 StyleSheet를 내려받게 될 경우 CSS 파싱을 통해 CSSOM 트리를 만들게 된다.
- 이 일련된 과정을 통해 둘을 결합하여 렌더 트리를 만들고, 레이아웃 작업을 통해 사용자에게 그려줄 영역을 계산한 뒤, 화면에 뿌려주게된다.
- 위 과정을 진행하면서 자바스크립트를 만나면, 자바스크립트 런타임 환경에 컨트롤(수행권한)을 넘겨 결과 값을 받는다.이 과정 중, DOM파싱은 중단된다.
- 생성된 DOM 노드의 레이아웃 수치(너비, 높이, 위치 등) 변경 시 영향 받은 모든 노드의 수치를 재계산하여, 렌더 트리를 재생성하는 과정을 Reflow 과정이라고하며, 이 과정이 끝난 후 재생성된 렌더 트리를 다시 그리게 되는데 이 과정을 Repaint라고 합니다.
- reflow가 이루어졌다고 항상 repaint가 되는 것은 아니며,
background-color,visibillty,outline등 레이아웃 수치에 영향을 끼치지 않는 것은 repaint 과정만 진행됩니다.
참고자료
velog
팀에서 꼭 필요한 프론트엔드 개발자가 되고 싶습니다.