개발하는데 다 이유가 있겠지

답변 초안

www.google.com을 입력하면 DNS 서버에서 해당 주소를 검색해 IP 주소로 변환합니다. IP 주소로 변환해 TCP 연결을 설정합니다. 3way handshake를 통해 송신자(서버)와 수신자(브라우저)의 연결을 확인하고 서버로부터 데이터를 전달받습니다. 전달받은 데이터를 브라우저 렌더링 파이프라인을 통해 화면에 그려냅니다.

1. DNS 조회
2. TCP 연결 수립
3. HTTP 요청
4. 서버의 응답
5. 브라우저 렌더링 파이프라인 진행

 

1. DNS 조회

사용자가 "www.google.com"을 입력하면, 브라우저는 도메인 이름을 IP 주소로 변환해야 합니다. 브라우저는 캐시된 DNS 기록을 먼저 확인하고, 없으면 로컬 DNS 서버에 요청하여 "www.google.com"에 해당하는 IP 주소를 얻습니다.

 

2. TCP 연결 수립

TCP 연결 수립 DNS를 통해 얻은 IP 주소를 바탕으로 브라우저는 서버와의 신뢰할 수 있는 통신 채널을 구축하기 위해 TCP 연결을 수립합니다. 이 과정에서 3-way handshake라는 과정을 거치는데,

• 브라우저가 SYN 패킷을 보내 연결을 요청합니다.
• 서버는 SYN-ACK 패킷을 보내 연결 요청을 승인하고, 자신이 사용할 초기 시퀀스 번호를 알려줍니다.
• 브라우저는 ACK 패킷을 보내 서버의 초기 시퀀스 번호를 확인하고 연결을 확정합니다. 이렇게 양쪽 시스템이 동일한 초기 시퀀스 번호를 가지고 데이터 전송을 시작할 준비를 마치게 됩니다.

 

3. HTTP 요청

HTTP 요청 TCP 연결이 수립되면, 브라우저는 HTTP 또는 HTTPS 요청을 보냅니다. 이 요청은 HTTP 메서드를 사용해 필요한 정보를 요청하거나 전송합니다.

• HTTPS를 사용하는 경우, SSL/TLS 핸드셰이크 과정을 거쳐 암호화된 통신 채널을 설정합니다. 이 과정에서 브라우저와 서버는 보안 인증서를 교환하고, 안전한 암호화 키를 협상하여 데이터를 안전하게 주고받을 수 있도록 합니다.
• HTTP는 평문으로 데이터를 전송하기 때문에 보안에 취약하며, HTTPS는 암호화를 통해 데이터 유출을 방지하여 더 안전합니다.

 

4. 서버의 응답

서버는 요청을 받고, 해당 리소스(HTML, CSS, JS, 이미지 등)를 브라우저에게 응답으로 보냅니다. 이 응답은 HTTP 응답 코드와 함께 전달됩니다.

 

• 요청 처리: 서버는 클라이언트(브라우저)로부터 받은 HTTP 요청을 분석하여 어떤 리소스를 요청했는지 파악합니다.
• 리소스 준비: 요청된 리소스(HTML, CSS, JavaScript 파일, 이미지 등)를 찾아 준비합니다.
• HTTP 응답 생성: 찾은 리소스와 함께 HTTP 응답을 생성합니다. HTTP 응답에는 다음과 같은 정보가 포함됩니다.
  • 상태 코드: 요청 처리 결과를 나타내는 숫자 코드입니다. (예: 200 OK, 404 Not Found, 500 Internal Server Error)
  • 헤더: 추가적인 정보를 제공하는 키-값 쌍입니다. (예: Content-Type, Content-Length, Server)
  • 본문: 실제 요청된 리소스 데이터입니다.
• 응답 전송: 생성된 HTTP 응답을 클라이언트로 전송합니다.

 

5. 브라우저 렌더링 파이프라인 진행

전달받은 데이터를 기반으로 DOM과 CSSOM을 생성하고, 렌더 트리를 구성한 뒤, 레이아웃과 페인트 단계를 통해 웹 페이지가 화면에 표시됩니다.

 

• HTML 파싱 및 DOM 생성
  • 브라우저는 HTML 파일을 읽고, 각 태그를 노드로 변환하여 DOM(Document Object Model)이라는 트리 구조를 생성합니다.
  • DOM은 HTML 문서의 구조를 나타내는 메모리 상의 표현입니다.
• CSS 파싱 및 CSSOM 생성
  • CSS 파일을 읽고 스타일 규칙을 파싱하여 CSSOM(CSS Object Model)을 생성합니다.
  • CSSOM은 스타일 정보를 담고 있는 트리 구조입니다.
• DOM과 CSSOM 결합 및 렌더 트리 생성
  • DOM과 CSSOM을 결합하여 렌더 트리를 생성합니다.
  • 렌더 트리는 화면에 보여질 요소들만 포함하는 트리 구조로, 각 노드에는 스타일 정보가 포함되어 있습니다.
• 레이아웃
  • 렌더 트리의 각 노드의 위치와 크기를 계산하는 과정입니다.
  • 브라우저는 CSS 속성 (width, height, margin, padding 등)을 기반으로 요소들의 위치와 크기를 결정합니다.
• 페인트
  • 레이아웃이 완료된 렌더 트리를 화면에 그리는 과정입니다.
  • 각 요소의 색상, 배경, 테두리 등을 적용하여 화면에 표시합니다.
• 합성
  • 여러 레이어로 나뉘어진 요소들을 하나의 레이어로 합쳐 화면에 최종적으로 출력하는 과정입니다.
  • GPU를 활용하여 빠르고 부드러운 렌더링을 가능하게 합니다.