브라우저에 www.google.com 입력 시 일어나는 일

 

 

 

1. 사용자 입력 처리

• 브라우저 주소창에 URL을 입력
• 브라우저는 이를 해석하여 해당하는 서버에 접속해야 할지 결정
• URL에는 프로토콜(http, https), 호스트 이름, 포트 번호(선택적), 리소스 경로가 포함

2. DNS 조회

• 호스트 이름을 IP 주소로 변환하기 위해 DNS 조회
• 로컬 DNS 캐시 확인
• 없으면 ISP의 DNS 서버에 조회 요청

3. 서버와의 TCP 연결

• DNS 서버를 통해 얻은 IP 주소에 대해 TCP 연결 시작
• HTTPS 프로토콜의 경우, 이 단계에서 TLS(Transport Layer Security) 핸드셰이크도 진행하여 암호화된 연결을 확립

4. HTTP 요청 및 응답

• TCP 연결이 성공적으로 수립되면, 브라우저는 HTTP 요청을 서버에 전송
• 서버는 이 요청을 처리한 후 HTTP 응답(HTML 문서 및 기타 리소스)를 브라우저에 전송

5. 렌더링 엔진 처리

• 브라우저는 응답 받은 HTML 문서를 렌더링 엔진에 전달
• 렌더링 엔진은 HTML을 파싱하여 DOM(Document object Model) 트리를 구축
• CSS 파일과 스타일 요소 역시 파싱되어 CSSOM(CSS Object Model) 트리 구축
• JavaScript 파일은 파싱되어 실행
• JS는 DOM을 수정할 수 있으며, 이러한 동적 변경은 렌더링 과정에 반영

6. 렌더 트리 구축

• DOM 트리와 CSSOM 트리는 결합되어 렌더 트리 형성
• 렌더 트리는 화면에 표시될 요소들과 그 스타일 정보를 포함

7. 레이아웃 및 페인트

• 렌더 트리 기반으로 각 요소의 위치와 크기를 계산하는 레이아웃(리플로우) 과정을 거침
• 레이아웃이 완료되면, 각 요소를 화면에 그리는 페인트(리페인트) 과정이 이루어짐

8. 사용자와의 상호작용

• 웹 페이지가 사용자에게 표시된 후, 사용자의 상호작용(클릭, 스크롤 등)에 따라 추가적인 네트워크 요청이 발생할 수 있음
• DOM 변화가 일어나고 이에 따라 추가적인 레이아웃 및 페인트 과정이 진행될 수 있음