[TIL] 브라우저

브라우저

1.개요

브라우저(browser)는 이름 그대로 훑어볼(browse + -er) 수 있게 만들어 주는 소프트웨어이다.
웹 브러우저는 인터넷을 통해 서버로부터 HTML, CSS, 자바스크립트 등 자원을 다운로드하고
이를 해석하여 사용자에게 웹 페이지를 보여준다.
브라우저의 종류에는 크롬, 사파리, 파이어폭스 등이 있다.

2.표준

웹 브라우저들은 웹 표준화 기구 W3C(World Wide Web Consortium)에서 정한 표준을 따른다.
물론 WHATWG (Web Hypertext Application Technology Working Group)라는 커뮤니티도 존재한다.
XHTML 2.0을 개발할 때 기존 웹 사이트에서 발생하는 호환성 문제로 개발이 중단되었는데,
이 때 Mozilla, Opera, Apple 등이 별도로 설립하였다.
물론 웹 기술의 표준화에 대한 요구가 꾸준히 있었기 때문에 두 조직이 협력을 하고 있다고 한다.
일단 웹 표준이라고 한다면 보통은 W3C의 표준을 의미하는 것에 가깝긴 하다.

3.구성

브라우저에 일반적으로 포함되는 구성은 다음과 같다.

1. 사용자 인터페이스 - 주소 표시줄이나, 각종 버튼, 북마크 메뉴 등 UI 요소를 포함한 구성요소
2. 브라우저 엔진 - 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어하는 엔진
3. 렌더링 엔진 - 요청한 콘텐츠를 화면에 표시하는 엔진
4. 통신 - HTTP요청과 같은 네트워크 호출에 사용
5. 자바스크립트 해석기 - 자바스크립트 코드를 해석하여 실행
6. 자료 저장소 - 쿠키와 같은 자료를 저장하는 계층

이 밖에도 브라우저마다 웹 표준 이상의 것을 제공하기 위한 부가 기능이 있을 수 있다.
대부분 서로 좋은 기능에 대해 모방하며 나아가기 때문에 실제로 브라우저 간 차이는 줄어들었다.

4.동작

웹 브라우저의 동작 단계를 요약하면 다음과 같다.

1. 서버에 요청 - 사용자가 이동하려는 웹 사이트에 대해 브라우저가 서버에 웹 페이지 요청
2. HTML 다운로드 - HTML, CSS, 자바스크립트 등 서버의 파일 응답 및 다운로드
3. HTML 해석 - 브라우저가 HTML 파일을 해석하여 DOM(Document Object Model)을 생성
4. CSS 해석 - 브라우저가 CSS 파일을 해석하여 스타일 규칙을 생성
5. 렌더링 - DOM과 CSS 스타일 규칙을 결합하여 페이지를 렌더링
6. 자바스크립트 해석 및 실행 - 페이지에서 자바스크립트 코드를 해석하고 실행
7. 화면 출력 - 브라우저가 렌더링된 페이지를 화면에 출력

브라우저는 웹 페이지를 요청하기 위해 서버에 HTTP 요청을 보낸다.
서버와 TCP/IP연결을 수립하고 요청을 통해 웹 페이지를 포함한 응답을 받는다.
응답 받은 페이지를 사용자에게 보여주기 위해서 브라우저 엔진과 렌더링 엔진이 작업한다.
우선, 브라우저 엔진이 HTML과 CSS를 파싱한다.
HTML파일을 파싱하여 DOM 트리를 생성하고, CSS파일을 파싱하여 스타일 규칙을 생성한다.
이렇게 생성된 스타일 규칙이 DOM 요소에 적용된다
렌더링 엔진이 DOM 트리와 스타일 규칙을 사용하여 브라우저 화면에 표시될 레이아웃을 계산하고,
계산된 정보를 바탕으로 콘텐츠를 출력한다.