- 웹을 토대로 인터넷의 컨텐츠(문서나 그림, 멀티미디어 등)를 열람하여 볼 수 있게 해주는 프로그램
- 예를 들어서, 사람이 브라우저를 실행하여 google.com 을 쳤을 때, 브라우저가 인터넷을 통하여 DNS 서버에게 먼저 IP를 확인하고 IP를 통해 찾아간 호스팅 서버에서 HTML 응답을 받아서 전달하여 보여주는 방식
브라우저 구조
- User Interface : 검색 또는 뒤로가기 같은 버튼의 UI 기능을 제어하는 백엔드
- Browser Engine : UI와 Rendering Engine 사이 중간 역할을 하는 엔진
- Rendering Engine : 실제 서버에서 받은 응답을 UI로 보여지게 하는 엔진
- Networking Layer : HTTP(S) 프로토콜로 요청, 응답을 받아오는 레이어
- JavaScript Interpreter : 자바스크립트 코드를 파싱하고 실행하는 해석기
- Data Persistence : 쿠키나 로컬 스토리지 같은 데이터를 저장하는 저장소
렌더링 엔진의 역할
- 실제 브라우저에서 UI 화면을 구성해주도록 하는 곳이 렌더링 엔진이다
- 서버로부터 받은 응답 HTML 문서를 HTML 코드와 CSS로 파싱하여 UI를 구성하는데, 브라우저별로 이 렌더링 엔진이 다르기 때문에 브라우저 간의 호환성 이슈가 발생할 수 있다
- 렌더링 엔진은 다음 순서들로 동작한다
- HTML을 파싱하여 DOM 트리를 생성한다
- CSS는 따로 파싱하여 DOM 트리에 적용시켜 Render 트리를 생성한다
- Render 트리의 레이아웃을 생성하여 UI를 페인팅한다
- 한 마디로, HTML을 DOM 트리로 생성하여 UI를 만든다고 보면 되는데, 여기서 DOM (Document Object Model) 은 HTML을 오브젝트로 변환한 것을 뜻한다
- 아래 HTML 코드를 렌더링한다고 가정해보자
<html>
<body>
<p>Hello!</p>
<div>
<img src="hello.png"/>
</div>
</body>
</html>
- 위 코드의 DOM 트리는 아래와 같은 형태로 생성된다