브라우저의 동작 원리

브라우저란?

브라우저는 웹서버에서 이동하며 쌍방향으로 통신하고 HTML 문서나 파일을 출력하는 그래픽 사용자 인터페이스 기반의 응용 소프트 워어이다. 웹 브라우저는 대표적인 HTTP 사용자 에이전트의 하나이기도 하다

브라우저의 주요 기능

사용자가 선택한 자원을 요청하고 브라우저에 표시하는 것이다 자원은 보통 HTML 문서지만 PDF나 이미지 또는 다른 형태일수 있다. 자원의 주소는 URL에 의해 정해진다. 브라우저는 웹 표준화 기구인 W3C(World Wide Web Consortium) 에서 정한 명세에 따라 파일을 해석해서 표시한다. 브라우저의 사용자 인터페이스는 브라우저마다 서로 닮아 있는데 다음과 같은 요소들이 일반적이다

• URI를 입력할 수 있는 주소 표시줄
• 이전 버튼과 다음 버튼
• 북마크
• 새로 고침 버튼과 현재 문서의 로드를 중단할 수 있는 정지 버튼
• 홈 버튼

브라우저의 사용자 인터페이스는 표준 명세가 없음에도 불구하고 수년간 서로의 장점을 모방하며너 현재에 이르게 되었다. HTML5 명세는 주소 표시줄, 상태 표시줄, 도구 모음과 같은 일반적인 요소를 제외하고 브라우저의 필수 UI를 정의하지 않았다 물론 파이어 폭스의 다운로드 관리자와 같이 브라우저에 특화된 기능도 있다

브라우저의 구성요소

• 사용자 인터페이스 : 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등. 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분
• 브라우저 엔진 : 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어
• 렌더링 엔진 : 요청한 콘텐츠를 표시 이것은 플랫폼 독립적인 인터페이스이고 각 플랫폼 하부에서 실행됨.
• 통신 : HTTP 요청과 같은 네트워크 호출
• UI 백엔드 : OS사용자 인터페이스 체계 사용
• 자바스크립트 해석기 : 자바스크립트 코드를 해석하고 실행.
• 자료 저장소 : 쿠키를 저장하는 것과 같이 모든 종류의 자원을 하드 디스크에 저장할 필요가 있다 HTML5에서는 브라우저가 지원하는  '웹 데이터 베이스'가 있다.

렌더링 엔진

사용자가 요청한 내용을 브라우저의 표시하는 일을 한다 HTML 및 XML문서와 이미지를 표시할 수 있다 플러그인이나 브라우저 확장 기능을 이용해 PDF와 같은 다른 유형도 표시할 수 있다

브라우저의 동작 과정

1. HTML 문서를 파싱
2. DOM(Document Object Mode) 구조로 바꾼다
3. css파일 파싱
4. 렌더트리 구축
5. 렌더 트리 배치
6. 렌더 트리 그리기