브라우저의 주요 기능
사용자가 요청한 데이터(자원)을 서버에 요청한 뒤 그 데이터를 받아서 다시 브라우저에 뿌려주는 것
- 자원
- 형태 - HTML 문서 / PDF / 이미지 등
- 주소 - URI (Uniform Resource Identifier) 에 의해 정해짐
- 웹 표준화 기구 W3C 에서 정한 HTML / CSS 명세에 따라 HTML 파일을 해석해서 보여줌
브라우저의 구조
- 사용자 인터페이스 - 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등. 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분
- 브라우저 엔진 - 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어
- ⭐렌더링 엔진 - 사용자 인터페이스에서 요청한 콘텐츠를 표시 (Ex. HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시)
- 통신 - HTTP 요청과 같은 네트워크 호출에 사용. 플랫폼에 독립적인 인터페이스이고 각 플랫폼 하부에서 실행됨. 웹서버와 통신
- UI 백엔드 - 콤보 박스와 창 같은 기본적인 장치를 그림. 플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용. UI 구동
- 자바스크립트 해석기 - 자바스크립트 코드를 해석하고 실행
- 자료 저장소 - 쿠키를 저장하는 것과 같은 모든 종류의 자원을 하드디스크에 저장하는 공간
⭐렌더링 엔진
웹서버로부터 응답 받은 내용을 UI상에 나타내줌
- 요청 받은 내용을 브라우저 화면에 표시하는 역할
- 여러 개의 인스턴스를 한 번에 구동할 수 O
- 브라우저마다 서로 다른 렌더링 엔진 사용 (Ex. Safari : Webkit)
💡 중요 렌더링 경로 - 브라우저가 하나의 화면을 나타내는 과정** (렌더링엔진 동작방식)
- 서버에서 응답으로 받은 HTML 데이터 파싱
- client - 주소창에 url 입력
- browser - 해당 서버에 요청, HTML 응답 받음
- 미디어 파일을 만나면 추가 요청 보냄
- JavaScript 파일 만나면 해당 파일을 받아온 후 실행할 때까지 파싱 멈춤
- HTML 파싱 결과 -> DOM Tree 구축
- HTML 바이트 데이터 -> 문자열 (인코딩에 따라 변환) -> Token (HTML 표준에 따라 변환)
(ex.<html>->StartTag: html,</html>->EndTag: html) - Start : html 이 들어오면 html 노드를 만들기 시작
- HTML 바이트 데이터 -> 문자열 (인코딩에 따라 변환) -> Token (HTML 표준에 따라 변환)
- CSS 파일을 요청해서 받아 CSSOM 만듬
- HTML 파싱 중 CSS 링크 존재 -> CSS 파일을 요청해서 받아옴
- Tree 형태의 CSSOM 만듬 (HTML 파싱과 유사하나 cascading 규칙 추가)
- DOM(Content) + CSSOM(Style) = Render Tree
- DOM Tree 중 화면에 실제로 보이는 것들로만 이루어짐
(ex. display: none; 의 노드는 추가 X)
- DOM Tree 중 화면에 실제로 보이는 것들로만 이루어짐
- Layout - 배치
- Render Tree 의 각 노드들에게 각각의 값(Position, Size) 부여
- Paint - 그리기
- UI 백엔드 동작, 각 노드들을 정해진 스타일 및 위치값대로 화면에 배치
- 순차적인 방식으로 입출력 진행
브라우저 동작 과정
1. 사용자 - URL 입력, Enter
2. URL 해석
- URL 구조
scheme:[//[user:password@]host[:port]][/]path[?query][#fragment] - URL 문법 확인
- 맞지 x -> 입력을 웹 브라우저의 기본 검색엔진으로 검색 요청
- HSTS(HTTP Strict Transport Security) 목록 로드
- HSTS: HTTP 대신 HTTPS 만을 사용하여 통신해야 한다고 알리는 보안기능
- 목록에 존재 -> 첫 요청을 HTTPS 로 보냄
3. DNS (Domain Name Server) 조회
- DNS 요청 전
- 브라우저에 해당 Domain 이 캐시되어 있는지 확인
- 로컬PC의 hosts 파일 (PC 의 자체 DNS 역할) 조회
- 위 방법이 모두 실패하면 Network stack에 구성돼 있는 DNS 로 요청 보냄
- DHCP(Dynamic Host Configuration Protocol) - 사용자 자신의 IP 주소, 가장 가까운 라우터와 DNS 서버의 IP 주소 받음
- ARP 프로토콜 - IP 주소를 기반으로 가장 가까운 라우터의 MAC 주소 알아냄
- target 의 MAC, IP 주소로 DNS 요청 다시 시작
- DNS Query 를 DNS 서버에 송신 -> 웹 서버의 IP 주소 응답
4. 웹서버 접속 - TCP 통신을 통해 Socket open
- 웹서버로의 요청이나 웹서버의 응답은 TCP 커넥션을 맺고 이루어짐
5. HTTP 프로토콜 요청
GET / HTTP/1.1
Host: google.com
Connection: close
[other headers]6. HTTP 서버 응답
- 요청 해석, 요청 받은 리소스를 찾음
- 응답 메시지 작성, 응답 전송
7. 웹 브라우저가 그림 (위의 브라우저의 구조 참고)
- 서버로부터 받은 리소스 (HTML, CSS, JS, Image 등)로 위의 과정 수행
youn