[프론트엔드 면접 대비] 주소창에 google.com을 입력하면 발생하는 일

강 수정·2023년 12월 12일

주소창에 google.com을 입력하면 무슨 일이 발생할까?

사용자가 웹 브라우저를 통해 google.com 을 입력하면 URL 주소 중 도메인 네임 부분을 DNS 서버에서 검색합니다.
DNS 서버에서 해당 도메인 네임에 해당하는 IP 주소를 찾아 사용자가 입력한 URL 정보와 함께 전달합니다.

DNS 서버
도메인 네임 - IP 주소
www.google.com - 200.200.200.2
브라우저는 HTTP 프로토콜을 사용하여 요청 메시지를 생성하고, HTTP 요청 메시지는 TCP/IP 프로토콜을 사용하여 서버로 전송됩니다.

HTTP 요청 메시지 - 예시
GET/search?q=hello&hl=ko HTTP/1.1
Host:www.google.com
서버는 HTTP 응답 메시지를 생성하여 다시 브라우저에게 데이터를 전송합니다.
HTTP 응답 메시지 - 예시
HTTP/1.1 200 OK
Content-Type: text/html;charset=UTF-8
Content-Length: 3423
```
<html>
  <body>...</body>
</html>
```
브라우저는 response를 받아 파싱하여 화면에 렌더링합니다.

브라우저의 렌더링과정

1. DOM Tree 생성

1.1. HTML파일은 HTML parser에 의해 파싱되어 DOM Tree로 변환된다.
1.2. link, img 노드 - 해당 태그 안에 명시되어 있는 리소스를 다운로드한다.
1.3. script 노드 - script노드에 DOM 구조를 변환할 수 있는 코드가 들어있을 수 있기 때문에 자바스크립트(script 태그/파일)를 해석하는 동안 DOM 파싱을 중단한다. (일시정지)

defer, async 옵션을 사용하면 script파일이 DOM 파싱을 중단하지 않는다.

2. CSSOM Tree 생성

2.1. CSS파일은 CSS parser에 의해 파싱되어 CSSOM Tree로 변환된다.
2.2. 이 과정에서 DOM 노드에 대한 스타일을 결정한다.

파싱(Parsing)
브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것을 의미한다.

3. 렌더트리 생성

3.1. DOM 트리, CSSOM 트리를 하나로 합친다.
3.2. 화면에 표시되어야 할 모든 노드의 컨텐츠, 스타일 정보를 포함하는 레이아웃 트리를 생성한다.
3.3. 화면에 표현되는 정보만 트리에 담기게 된다.

💡 display: none과 같이 레이아웃에 보이지 않는 속성은 렌더트리에 포함되지 않는다 ! 따라서 보조기기나 스크린리더 등이 해당 속성을 인식하지 못 하는 문제점이 있다. 웹 접근성을 위해서는 display: none을 적용하지 않도록 주의해야 한다.

4. 레이아웃 단계 (Layout)

4.1. 렌더 트리의 각 노드를 화면에 배치한다.
4.2. 뷰포트 기반으로 렌더트리의 각 노드가 가지는 정확한 위치와 크기를 계산한다.
4.3. 관련 속성 : width, height, padding, margin, float, position 등 레이아웃에 영향을 주는 모든 속성

5. 페인트 단계 (Paint)

5.1. 계산한 위치/크기를 기반으로 화면에 그린다.
5.2. 한 페이지를 여러 개의 레이어로 나눈 뒤 그 레이어 위에 텍스트, 색, 이미지, 보더, 그림자 등 시각적 부분을 그리는 작업이 진행된다.
5.3. 관련 속성 : color, border-radius, background, box-shadow 등 시각적으로 보여지는 모든 속성