웹 브라우저
웹 브라우저(Web browser) 혹은 브라우저는 웹에서 페이지를 검색하고 표시하며 사용자가 하이퍼링크를 통해 추가 페이지에 접근할 수 있도록 하는 프로그램입니다. 브라우저는 사용자 에이전트의 가장 친숙한 유형입니다.
mdn - web
브라우저는 웹에 접근하고, 내용을 표시하며 사용자의 요청을 받아서 서버에 전송하고 해당 응답을 다시 사용자에게 보여주는 프로그램입니다. 브라우저는 HTTP를 통해 웹 서버와 통신을 하며 데이터를 주고 받는데 이를 위해서 여러 작업을 하게 됩니다.
브라우저 기본구조
-
사용자 인터페이스 - 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등 사용자가 직접 조작할 수 있는것들을 말합니다. 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분이 이에 해당됩니다.
-
브라우저 엔진 - 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어합니다.
-
렌더링 엔진 - 요청한 콘텐츠를 표시합니다. 예를 들어 HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시하는 역할을 합니다.
-
통신 - HTTP 요청과 같은 네트워크 호출에 사용됩니다. 이것은 플랫폼 독립적인 인터페이스이고 각 플랫폼 하부에서 실행됩니다.
-
UI 백엔드 - 콤보 박스와 창 같은 기본적인 장치를 그립니다. 플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용합니다.
-
자바스크립트 해석기 - 자바스크립트 코드를 해석하고 실행합니다.
-
자료 저장소 - 이 부분은 자료를 저장하는 계층입니다. 쿠키를 저장하는 것과 같이 모든 종류의 자원을 하드 디스크에 저장할 필요가 있습니다. HTML5 명세에는 브라우저가 지원하는 '웹 데이터 베이스'가 정의되어 있습니다.
동작 원리
1. DNS 조회
사용자가 URL을 입력하면 브라우저는 도메인을 IP 주소로 변환합니다. 사용자가 입력하는 URL은 자연어로 이루어져 있기 때문에 이를 컴퓨터가 이해할 수 있도록 도메인을 IP 주소로 변환해야 합니다. 이 과정을 DNS 조회(DNS Lookup)라고 합니다. 브라우저는 캐시된 DNS 기록을 먼저 확인하고, 없으면 로컬 DNS 서버에 요청하여 URL에 해당하는 IP 주소를 얻습니다.
2. TCP 연결
IP 주소가 확인되면, 브라우저는 서버와 TCP 연결을 수립합니다. TCP(Transmission Control Protocol)는 데이터를 신뢰성 있게 전달하기 위한 프로토콜입니다. 이 과정에서 브라우저는 서버와 3-way handshake를 수행합니다. 즉, 브라우저가 SYN 패킷을 보내고, 서버가 SYN-ACK 패킷을 보내며, 다시 브라우저가 ACK 패킷을 보내는 과정입니다.
3. HTTP 요청
TCP 연결이 수립되면, 브라우저는 HTTP 또는 HTTPS 요청을 보냅니다. 이 요청은 "GET / HTTP/1.1" 같은 형식으로, 웹 페이지를 요청하는 메시지입니다. 만약 HTTPS를 사용할 경우, 이 단계 이전에 SSL/TLS 핸드셰이크도 수행됩니다. 이 과정에서는 브라우저와 서버가 암호화된 연결을 설정하기 위해 보안 인증서를 교환하고, 암호화 키를 협상합니다.
4. 서버 응답 대기
서버는 요청을 받고, 해당 리소스(HTML, CSS, JavaScript, 이미지 등)를 브라우저에게 응답으로 보냅니다. 이 응답은 HTTP 응답 코드(예: 200 OK)와 함께 전달됩니다. HTTP 응답 메세지는 다시 TCP 프로토콜을 사용해 인터넷을 거쳐 사용자의 컴퓨터로 전송되고, 도착한 HTTP 응답 메세지는 HTTP 프로토콜을 이용해 웹 페이지 데이터로 변환됩니다.
5. 렌더링 파이프라인 진행
DOM과 CSSOM을 생성하고, 렌더 트리를 구성한 뒤, 레이아웃과 페인트 단계를 통해 웹 페이지가 화면에 표시됩니다.
DOM트리
DOM 트리는 HTML 문서를 parsing하여 트리 형태로 나타낸것 입니다. <html>요소가 DOM 트리의 루트 노드입니다. 트리는 다른 태그간의 관계와 계층을 반영하여 다른 태그에 감싸져 있는 태그는 자식 노드가 됩니다.
참고 사이트
mdn - 브라우저는 어떻게 동작하는가
velog 브라우저-동작-원리-구조
https://hyongti.tistory.com/16
https://d2.naver.com/helloworld/59361
https://www.maeil-mail.kr/question/20
https://www.youtube.com/watch?v=0Oqkw8wVY_c
