브라우저란
흔히 사용자들은 브라우저라 하면 사용자가 검색하여 그에 해당하는 정보를 보여주는 플렛폼이라고 생각할 것이다. 그렇다면 이 브라우저가 우리에게 정보를 보여주기까지 어떤 과정을 거칠까??
1. url 입력
먼저 우리는 당연히 url에 자기가 원하는 정보를 검색할 것이다. 예시로 github.com을 지금부터 예로 들것이다.
2. DNS
브라우저는 github.com을 이해 할 수 없다. 이것을 이해시킬려면 ip주소로 바꿔야하는데 이 역할을 domain name system 즉 DNS가 하고 있다.
dns 원리
먼저 우리 local dns에 github.com에 ip가 캐싱되어 있지 않다고 가정하겠다. 만약 여기서 local에 캐싱되어있다면 바로 그 값을 주기 때문에 작업이 끝이 난다.
-
root dns
먼저 우리 local은 github.com에 ip를 모르기 때문에 root dns server로 간다. 이때 root dns도 github.com에 ip를 알지 못한다. 그러면 github.com에 마지막은 com이기 때문에 root dns에서 com dns로 가라고 한다. -
com dns
com dns server 또한 github.com에 ip를 모른다. 이제 github.com dns server로 가라고 한다. -
github.com dns
github.com dns server는 github.com에 ip를 가지고 있다. 즉 local dns server에게 github.com의 ip를 주게되는 것이다.
이 과정을 DNS Recursive Query라고 부른다.
이해를 돕기위해 사진을 가지고 왔다.
root dns -> tld dns -> sld dns를 가듯이
root dns -> com dns -> github.com dns 이렇게 찾아가는 것이다.
3. tcp 통신
이제 브라우저가 github.com에 해당하는 ip 서버와 연결을 할 것이다.
3-way handshake
클라이언트와 서버가 SYN 및 ACK 메시지를 주고 받으며 연결을 설정한다.
4. 서버에 http 요청
브라우저가 github.com 을 요청한다. (get, post, patch 등등)
이때 쿠키 정보도 함께 보낸다.
여기까지가 우리가 그 url에 접속하는 과정이다.
렌더링 과정
지금부터 브라우저가 화면에 렌더링 하기 까지의 과정을 살펴보겠다.
먼저 아까 4번 과정에 http 요청을 통해 서버에서 index.html과 번들 파일이 있다면 번들 파일까지 여러 파일들을 가져오게 된다.
5. dom 트리
서버에서 파일의 내용을 8kb단위로 전송하여 준다.
5-1. 파일 해석
서버에서 8kb단위로 보낸 파일을 지정한 인코딩 방식(meta charset="utf-8")을 통해 해석한다.
5-2. 파싱
이제 파싱을 시작할 것이다.
<html>
<head>
<title>title</title>
</head>
</html>이를 파싱하게되면 startTag: html, startTag: head ... 이렇게 끝까지 파싱하게 된다.
이제 이를 바탕으로 dom tree를 생성한다.
6. cssom 트리
html을 파싱하던 중 style 태그를 만나게 되면 파싱을 중단하고 css 파싱을 시작한다.
출처: https://tecoble.techcourse.co.kr/post/2021-10-24-browser-rendering/
7. 렌더 트리
출처: https://tecoble.techcourse.co.kr/post/2021-10-24-browser-rendering/
dom tree와 cssom tree를 가지고 렌더트리를 형성한다.
8. reflow, paint
8-1. reflow
reflow는 layout 작업이라고도 불리며, %와 같은 작업에서 실제로 어느위치에 배치해야할지 계산하는 작업을 말한다.
8-2. paint
reflow를 바탕으로 실제 화면 픽셀로 변환한다.
그렇게 우리가 화면에 웹페이지를 볼 수 있게되는 것이다.
