검색창에 www.techcourse.woowahan.com을 검색하면 결과가 브라우저에 렌더링되기 전까지 어떤 일이 발생할까요?

[le2sky]

뭘까용?

[jimi567]

브라우저는 다음과 같은 과정을 거치며 페이지가 랜더링 됩니다.

1. DNS 조회

입력한 도메인 "www.techcourse.woowahan.com"을 IP 주소로 변환하기 위해 DNS 서버에서 해당 도메인과 매핑되는 IP 주소를 조회 합니다.

2. 서버 연결

DNS에서 조회 결과를 받으면, 브라우저는 해당 도메인의 IP 주소로 서버에 연결을 시도 합니다.(이때 TCP라면, 3-way handshake)

3. HTTP 요청 전송

서버와의 연결이 성공하면, 브라우저는 HTTP 요청을 서버에 전송하게 됩니다.
이때, 이 요청에는 요청한 페이지의 경로, User Agent, 쿠키 등의 기타 정보가 담깁니다.

4. 서버 처리

서버에서 받은 요청을 처리하고, 요청된 페이지에 대한 HTML 문서나 기타 리소스(css, 이미지 등) 을 응답하게 됩니다.

5, 응답 수신

브라우저는 서버로 받은 정보를 처리하게 됩니다. 만약 HTML 문서의 경우는 브라우저는 이를 파싱하고 랜더링 엔진을 통해 사용자에게 화면에 보여줄 수 있도록 합니다.

6. 페이지 랜더링

브라우저는 응답받은 HTML 문서를 기반으로 페이지를 랜더링하여 사용자가 볼 수 있도록 화면에 표시하게 됩니다.

--- 번외
파싱, 랜더링 과정이나 랜더링 엔진에 대한 자세한 내용

네이버 D2 - 브라우저는 어떻게 동작하는가?
위 내용을 정리한 gyoogle 깃헙 리포

이 질문 내용의 전반적인 내용을 깊게 설명해주는 책이
https://www.yes24.com/Product/Goods/90640081
이 책인데 우테코 캠퍼스에도 있음

[GIVEN53]

1. 사용자가 웹브라우저 검색창에 techcourse.woowahan.com 입력

2. URL 해석

브라우저가 입력된 URL을 파싱하여 프로토콜(http/https), 도메인(techcourse.woowahan.com), 경로 및 쿼리 문자열을 구분합니다.

3. DNS(Domain Name System) 조회

DNS 서버에 요청을 보내기 전에 브라우저는 먼저 캐싱된 DNS 정보를 확인합니다.

1. 브라우저 캐시 - 이전에 방문한 DNS 기록
2. hosts 파일

• mac/linux: /etc/hosts
• window: C:\Windows\System32\drivers\etc\hosts

캐시에 없을 경우, 브라우저는 로컬 DNS 서버에 도메인 이름을 IP 주소로 변환해 달라고 요청합니다.

로컬 DNS 서버는 이전에 해당 도메인의 IP 주소를 캐싱한 이력이 있는지 확인 합니다.
없으면 루트 DNS 서버, TLD(Top-Level Domain) DNS 서버, 그리고 권한 있는 DNS 서버를 통해 계층적으로 DNS 조회를 수행합니다.

로컬 DNS 서버는 가입한 ISP(Internet Service Provider)가 제공하는 DNS 서버 또는 Public DNS 서버(ex. Google 8.8.8.8)이다.
내 DNS 서버 확인하기 (mac 기준)

$ cat /etc/resolv.conf

KT : 168.126.63.1, 168.126.63.2
SK Broadband : 210.220.163.82, 219.250.36.130
LG U+ : 164.124.101.2, 203.248.252.2

DNS 동작 순서

1. 브라우저가 로컬 DNS 서버에게 techcource.woowahan.com의 IP 주소 요청 (Recursive Query)
2. 루트 DNS 서버에게 질의 -> com으로 가세요 (Iterative Query)
3. TLD(Top-Level Domain) DNS 서버에게 질의 -> woowahan.com으로 가세요 (Iterative Query)
4. SLD(Second-Level Domain) Authoritative DNS 서버에게 질의 -> techcource.woowahan.com으로 가세요 (Iterative Query)
5. TLD(Third-Level Domain) Authoritative DNS 서버에게 질의 -> IP 주소는 xxx.xxx.xxx.xxx 입니다 (Iterative Query)
6. 로컬 DNS 서버는 수신한 IP 주소를 캐싱하고 브라우저에게 IP 주소 응답 (Recursive Query)

techcource.woowahan.com가 woowahan.com 네임 서버에 서브도메인 NS 레코드로 등록되어 있다고 가정
woowahan.com 네임 서버에 A 레코드로 등록되어 있을 경우 4번에서 IP 주소 반환

4. HTTP 요청 메시지

HTTP 프로토콜을 사용하여 요청 메시지를 작성합니다.

5. TCP 연결 설정

3-way Handshake과정을 통해 브라우저와 웹 서버 간 TCP 연결이 수립됩니다.

6. HTTP 요청 전송

HTTP 요청을 서버로 전송합니다.

7. 서버 처리

서버는 HTTP 요청을 수신하고, 요청된 리소스를 처리합니다. 이는 서버의 애플리케이션 로직과 데이터베이스 조회 등을 포함할 수 있습니다.

8. HTTP 응답 전송

서버는 요청된 리소스(HTML, CSS, JavaScript, 이미지 등)를 포함하는 HTTP 응답을 생성해서 클라이언트(브라우저)에게 전송합니다.

9. 브라우저 처리 및 렌더링

브라우저가 서버로부터 HTTP 응답을 수신하면 이를 파싱하여 렌더링하는 과정을 거칩니다.

1. HTML 문서를 파싱하여 DOM(Document Object Model) tree 생성
2. CSS를 파싱하여 CSSOM tree 생성
3. DOM tree와 CSSOM tree를 결합하여 Render tree 생성
4. Render tree 노드들의 정확한 위치와 크기를 계산하는 Layout 단계 진행
5. Layout에서 계산된 모든 위치와 크기를 실제 픽셀로 변환하여 화면에 렌더링하는 Paint 단계 진행

추가 키워드

• DNS query : Iterative Query vs Recursive Query (+ DNS 서버 질의 시 Iterative Query를 사용하는 이유)
• TCP 연결 이후 하위 계층 과정

[alstn113]

여러분 정성에 감사드립니다 허허,,,