[HTTP] 웹 브라우저(Web Browser)
웹 브라우저 (Web Browser)
- 웹 브라우저는 서버와 HTTP 통신을 대신해주고, 수신한 리소스를 시각화 해준다.
- 웹에서 정보를 탐색하고 HTML문서, 이미지 등 여러 컨텐츠를 우리에게 표현해주는 소프트웨어
- 뛰어난 이용자 경험(UX) 제공
- 예) Google Chrome, Mozilla Firefox, Apple Safari, Microsoft Edge, Opera
# 웹 브라우저의 기본 동작
1. URL 분석 : 웹 브라우저의 주소 창에 입력된 주소 해석
2. DNS 요청 : 입력된 주소 탐색
▶ DNS (Domain Name Server)
: Host의 도메인 이름을 IP로 변환하거나, IP를 도메인 이름으로 변환함
3. HTTP를 통해 해당 서버에 요청
4. 서버의 HTTP 응답 수신
5. 리소스 다운로드 및 웹 렌더링 (HTML, CSS, JavaScript)
# 웹 브라우저의 기본 구조
- 사용자 인터페이스
: 검색창, 뒤로가기/앞으로가기 버튼, 새로고침 등 브라우저 프로그램 자체의 GUI를 구성하는 부분
- 브라우저 엔진
: 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어
- 렌더링 엔진
: 요청한 콘텐츠(HTML/CSS 등)를 파싱하여 표시
- 통신
: HTTP 요청과 같은 네트워크 호출에 사용
- JS 엔진
: 자바스크립트 코드를 해석하고 실행
- UI 백엔드
: 기본적인 위젯을 그리는 인터페이스로 플랫폼에서 명시하지 않은 일반적인 인터페이스
- 데이터 저장소
: 로컬 스토리지, 쿠키 등 브라우저 메모리를 활용하여 저장하는 영역
렌더링 (Rendering)
- 요청받은 내용을 브라우저 화면에 표시해주는 역할
- 렌더링 엔진에 의해 이뤄짐 (브라우저별로 다름)
# 렌더링 엔진 동작 과정
1. 렌더링 엔진이 전달받은 HTML 문서를 파싱하여 DOM트리를 구축한다.
2. 외부 CSS 파일과 함께 포함된 스타일 요소를 파싱한다.
3. DOM트리와 파싱된 스타일 요소를 합쳐 렌더 트리를 구축한다.
4. 렌더 트리의 각 노드에 대해 화면 어디에 배치할지 결정한다.
5. UI 백엔드에서 렌더 트리를 각 노드에 그린다.