브라우저에 google.com을 입력하면 어떻게 될까? 당연히 google 사이트로 이동할 것이다.
그렇다면 브라우저는 어떤 과정을 통해서 google사이트를 보여주는 것일까?
1. 도메인 주소 변환
: 도메인 주소 → IP 주소로 변환
우선 입력창에 google.com을 입력하면, 컴퓨터는 도메인 주소를 IP주소로 바꾸려 할 것이다.
이때, 이용하는 것이 바로 DNS 레코드이다. DNS는 일종의 전화번호부 라고 생각하면 된다. 컴퓨터는 각각 고유의 IP 주소를 가지고 있다.
우리가 흔히 다른사람의 전화번호를 다 외우고 다니지 않는 것처럼, 일일히 IP 주소를 기억할 수도 없기에, 도메인 네임별 IP를 저장해 놓은 것이 DNS라고 생각하면 될 것이다.
DNS 레코드를 찾기 위해서는 이전에 방문한 기록이 있는지 확인한다. 이를 캐시라고 하는데, 최대 4가지 캐시를 확인하는 과정을 거친다.
- 브라우저 캐시를 확인
- OS캐시를 확인(1에서 miss 가 발생하는 경우)
* miss - 찾고자 하는 주소의 IP주소가 존재하지 않는 경우 - 라우터 캐시를 확인(2에서 miss 가 발생하는 경우)
: 컴퓨터 자체에 없는 경우 브라우저는 DNS 캐시를 관리하는 라우터와 통신한다. - ISP에 가서 확인(3에서 miss 가 발생하는 경우)
만약 4까지 했는데도 IP가 없다면?🤔
DNS 서버를 확인한다.
DNS서버에서 도메인 이름을 찾는 과정은 아래와 같다.
처음엔 root 네임 서버로 간다.
root 서버는 .com 도메인 네임 서버로 가라고 알려주며, .com 네임 서버는 goole.com 네임 서버로 연결시킨다.
이렇듯 한 level씩 내려오면서 도메인에 해당하는 IP 주소를 반환한다.
2. 브라우저가 서버와 TCP 연결
: IP 주소를 통해 서버와 연결 시도
도메인 주소로 IP를 얻었다면, 그 IP주소에 해당하는 서버와 연결하여 정보를 전송한다.
브라우저는 인터넷 프로토콜을 통해서 이러한 연결을 진행하는데 가장 많이 사용하는 HTTP는 TCP를 사용한다.
해당 서버와 통신하기 위해 TCP에서 3way-handshake를 이용한다.
3 way-handshake
위 그림과 같이 3개의 과정을 거친다.
- Client가 Server에게 SYN을 보낸다.
- Client는 Server가 보낸 SYN에 대한 ACK을 보낸다.
- Server는 Client가 보낸 SYN에 대한 ACK과 Client에게도 SYN을 보낸다
이렇게 3way-handshake를 통해 연결을 했다면, 통신을 다 한 후에는 4 way-handshake를 통해 연결을 종료한다.
4 way-handshake
4 way-handshake란 아래와 같은 4개의 과정을 거친다.
- Client가 Server에게 FIN을 보낸다.
- FIN에 대한 ACK을 한다.
- Server도 Client에게 FIN을 보낸다.
- FIN에 대한 ACK을 보낸다.
여기서 잠깐‼️
3way-handshake에서 SYN을 받은 Server는 ACK+SYN을 같이 보냈는데 왜 여기서는 ACK을 보내고 FIN을 보내는 것일까?🤔
그 이유는 FIN을 받고 Server도 종료하기까지 준비를 해야하기 때문이다. 종료할 준비가 다 되면 Client에게 FIN을 보내기 때문에 delay가 발생한다.
3. 브라우저는 웹서버에 HTTP 통신 요청
: 서버와 연결된 후 HTTP 통신
브라우저가 서버에 연결되면, 브라우저는 HTTP 통신규약에 맞춰서 서버에 통신을 요청한다. HTTP 요청에는 요청라인, 헤더와 본문 내용이 담겨있다.
요청라인에는 아래와 같은 정보들이 담긴다.
- GET/POST/PUT/PATCH/DELETE 등의 요청 메서드
- 요청된 리소스를 가리키는 경로
- 통신할 HTTP 버전
4. 웹 서버가 요청을 처리하고 응답 전송
: HTTP 요청 처리
웹 서버는 요청을 받고 요청 라인, 헤더 및 본문의 정보를 기반으로 요청 처리 방법을 결정한다.
GET /google HTTP/1.1 요청에 대해 서버는 이 경로의 콘텐츠를 가져오고 응답을 생성하여 클라이언트로 다시 전송한다. 응답에는 아래와 같은 내용이 포함된다.
- 클라이언트에게 요청 상태를 알려주는 상태 라인
- 브라우저에 응답 처리 방법을 알려주는 응답 헤더
- 해당 경로에서 요청된 리소스 (HTML, CSS, Javascript, 이미지 파일과 같은 콘텐츠 또는 데이터)
웹 브라우저는 서버에서 보낸 응답을 받는데, 이때 200의 상태 코드는 성공한 것으로 간주한다.
전송 받은 리소스는 텍스트(예: index.html) 또는 텍스트가 아닌 데이터(예: logo.img)의 정적 파일일 수 있다. 웹 브라우저가 항상 정적 파일을 요청하는 것은 아니다. 대부분 웹 서버가 동적 리소스를 생성하여 코드 조각이나 템플릿에서 HTML을 구축하고 동적 데이터와 결합하여 응답으로 텍스트로 다시 전송하여, 웹 브라우저가 페이지를 렌더링 할 수 있다.
5. 랜더링
index.html 파일을 가져오고 나면 브라우저는 랜더링을 진행한다.
랜더링이란?
HTML, CSS, JS등의 문서가 브라우저에서 출력되는 과정이다.
브라우저 마다 다르지만, 브라우저는 렌더링을 수행하는 렌더링 엔진을 가지고 있다. 크롬은 블링크(Blink), 사파리는 웹킷(Webkit) 그리고 파이어폭스는 게코(Gecko)라는 렌더링 엔진을 사용한다.
어떤 과정을 통해서 랜더링이 진행될까?
1) Render Tree 생성
브라우저는 토크나이징/렉싱/파싱 과정을 거쳐 html 파일로 DOM Tree를 형성하며, CSS파일로 CSSOM Tree를 완성한다. 이 두가지를 합친것이 Render Tree 인 것이다.
DOM Tree와 CSSOM Tree의 형태는 아래를 참고하면 도움이 될 것이다.
이러한 파싱 과정 중 script 태그를 만나면, DOM Tree 생성이 중단되고 다운로드 및 실행이 일어난다.
script 태그에도 어트리뷰트에 따라 실행방식이 달라진다. 자세한 내용은 아래 글을 확인해보자.
💡 script 태그의 async/defer
자바스크립트 파싱에 의한 DOM 생성 중단 문제를 근본적으로 해결하기 위해 HTML5부터 script 태그에 async와 defer 어트리뷰트가 추가되었다.
async, defer 어트리뷰트는 다음과 같이 src 어트리뷰트를 통해 외부 자바스크립트 파일을 로드하는 경우에만 사용할 수 있다. (인라인 자바스크립트는 사용 불가능)
<script async src="extern.js"></script>
async와 defer 어트리뷰트를 사용하면 HTML 파싱과 외부 자바스크립트 파일의 로드가 비동기적으로 동시에 진행되지만, 자바스크립트 실행 시점에 차이가 있다.
async 어트리뷰트
HTML 파싱, 외부 자바스크립트 파일의 로드가 비동기적으로 동시에 진행된다. 단, 자바스크립트의 파싱과 실행은 자바스크립트 파일의 로드가 완료된 직후 진행되며, 이때 HTML 파싱이 중단된다. 여러 개의 script 태그에 async 어트리뷰트를 지정하면 script 태그 순서 상관없이 로드가 완료된 자바스크립트부터 먼저 실행되므로 순서가 보장되지 않는다. 따라서 순서 보장이 필요한 scritp 태그에는 async 어트리뷰트를 지정하지 않아야 한다. IE10 이상에서 지원된다.
defer 어트리뷰트
HTML 파싱, 외부 자바스크립트 파일의 로드가 비동기적으로 동시에 진행된다. 단, 자바스크립트의 파싱과 실행은 HTML 파싱이 완료된 직후, 즉 DOM 생성이 완료된 직후(이때 DOMContentLoaded 이벤트가 발생한다) 진행된다. 따라서 DOM 생성이 완료된 이후 실행되어야 할 자바스크립트에 유용하다. IE10 이상에서 지원된다.
2) Layout
Render Tree 가 완성되면 이를 기반으로 Layout 과정을 거친다. 컴포넌트의 크기, 위치를 결정하는 단계이다.
모든 상대단위 → 절대단위(px)로 변환 되며 레이아웃 단계는 뷰포트(Viewport) 내에서 각 노드들의 정확한 위치와 크기를 계산 한다.
즉 , 브라우저 화면의 어떤위치에 어떤크기로 출력될지 계산 하는 단계라고 할수 있다.
3) Paint
Paint 단계에서는 Layout 단계에서 계산된 값을 이용해 Render Tree의 각 노드를 화면상의 실제 픽셀로 변환한다. 이때 픽셀로 변환된 결과는 하나의 레이어가 아니라 여러 개의 레이어로 관리된다.
4) Composit
Paint 단계에서 생성된 레이어들을 합치는 Composit 단계를 지난다. 이후 우리가 실제 보는 화면이 생성되는 것이다.
만약 CSS가 변경된다면? 🤔
폰트 사이즈, 위치, 레이아웃 등이 바뀐다면 다시 Layout단계로 돌아가서 Layout을 진행하는데, 이를 Reflow라고 한다.
색상만 바뀐다면, 다시 Paint 과정으로 돌아가며 Repaint라고 부른다.
Composit 단계로 돌아가는 것은 transform이란 명령뿐이다.
이러한 과정을 통해서 google.com 입력 시 웹사이트를 볼 수 있는 것이다.
이전까지는 한번도 관심을 갖지 않았다가 문득 시작된 궁금증에 알아보게 된 이번 아티클이었다. 생각보다 많은 내용이 들어있었고, CS 관련 내용도 많아서 복습하고 추가적으로 공부하게 된 좋은 계기가 되었다.
질문이나 궁금하신점 또는 제가 잘못 알고있는 정보는 댓글 부탁드립니다😊
Reference
What happens when you type a URL in the browser and press enter?
If you are in any technical profession, I am sure someone at some point has asked you this question. Whether you are an engineer…
medium.com
https://aws.amazon.com/ko/blogs/korea/what-happens-when-you-type-a-url-into-your-browser/
웹 브라우저에 URL을 입력하면 어떤 일이 생기나요? | Amazon Web Services
여러분은 매일 웹 브라우저를 열고 소셜 미디어, 뉴스, 전자 상거래 사이트 등 즐겨 찾는 웹 사이트를 탐색합니다. 주소창에 URL을 입력하거나 페이지 링크를 클릭하면 해당 페이지로 이동합니다
aws.amazon.com
브라우저의 렌더링 과정
렌더링이란 HTML,CSS, 자바스크립트 등 개발자가 작성한 문서가 브라우저에서 출력되는 과정을 말합니다.
medium.com
https://tecoble.techcourse.co.kr/post/2021-10-24-browser-rendering/
브라우저 렌더링 과정 이해하기.
최근에 백엔드 팀원들과 CS공부를 하면서, 주소창에 을 입력했을 때 일어나는 일에 대해 공부하였다. 이때 백엔드 팀원이 받아온 HTML…
tecoble.techcourse.co.kr
'FrontEnd 공부 > JS와 관련된 고찰' 카테고리의 다른 글
싱글스레드인 JS에서 비동기 처리는 어떻게 할까?(3) (0) | 2023.02.20 |
---|---|
싱글스레드인 JS에서 비동기 처리는 어떻게 할까?(2) (3) | 2022.10.05 |
싱글스레드인 JS에서 비동기 처리는 어떻게 할까?(1) (1) | 2022.10.01 |
‘자바스크립트는 왜 프로토타입을 선택했을까’를 읽고 느낀점와 그 문제의 해답에 관하여 (0) | 2022.09.04 |