Broswers and how they work? - 브라우저

브라우저란?

웹 페이지, 이미지, 비디오 등의 콘텐츠를 수신, 전송 및 표현하는 소프트웨어이다.

브라우저의 주요 기능

사용자가 선택한 자원을 서버에 요청, 그것을 해석하여 브라우저에 표시

자원은 대부분 HTML 문서지만 제공하는 기능에 따라 PDF나 이미지, 또는 다른 형태의 파일일수도 있다. 여러가지 자원의 주소는 URL이다.

W3C(Wide Web Consortium)은 웹 표준화 기구이다. 우리곁에서 쉽게 볼 수 있는 브라우저인 크롬, 익스플로러(독점으로 인하여 표준 명세와 다른 부분이 많아 개발자들이 개발하는데 있어서 힘들어하고 또한 다양한 기능을 넣지 못하였다. 하지만 근래 익스플로러의 종료 선언을 하였다.), 파이어폭스 등의 최신 소프트웨어들은 모두 W3C에서 정한 표준 명세를 따른다.

브라우저의 UI

브라우저의 UI(User Interface)는 서로 닮은 모습인것을 볼 수 있는데 보통 다음과 같은 요소들이 일반적으로 포함되어 있다.

1. URL을 입력할 수 있는 주소 표시 줄
2. 이전 페이지, 다음 페이지 버튼
3. 북마크(즐겨찾기)
4. 새로고침 버튼과 현재 문서의 로드를 중도정지할 수 있는 버튼
5. 홈 버튼

비록 브라우저의 UI에는 표준 명세가 없음에도 불구하고 지난 수년간 서로의 기능을 모방하며 비슷한 모습을 갖추게 되었다. 그럼에도 각자 브라우저만의 장단점과 최대의 퍼포먼스를 낼 수 있는 환경이 다르기 때문에 여러 브라우저가 현재까지도 자신들만의 팬층(점유율)을 유지한 채 이어져오고 있다.

브라우저의 기본 구조

1. 사용자 인터페이스(UI) : 요청한 페이지를 보여주는 창을 제외한 모든 부분으로 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등이 이에 해당한다.

2. 브라우저 엔진 : 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어한다.

3. 렌더링 엔진 : 요청한 컨텐츠를 표시한다. 만약 HTML을 요청하면 HTML과 CSS를 파싱(해석)하여 화면에 표시한다.

4. 통신 : HTTP 요청과 같은 네트워크 호출에 사용된다. 이것은 플랫폼의 독립적인 기능이고 각 플랫폼의 하부에서 실행된다.

5. UI 백엔드 : 콤보박스나 글 입력 폼 등의 기본적인 장치를 그린다. 플랫폼에서 명시하지 않은 인터페이스로 OS 사용자 인터페이스 체계를 사용한다.

6. 자바스크립트 해석기 : 자바스크립트 코드를 해석하고 실행한다.

7. 자료 저장소 : 자료를 저장하는 계층으로 쿠키나 로컬 스토리지등의 자료가 저장되는 저장소이다. 이는 하드디스크에 저장되며 HTML명세등도 이곳에 저장된다.

렌더링 엔진

렌더링 엔진의 역할은 사용자로부터 HTML, XML, 이미지 등 요청받은 내용을 브라우저 화면에 표시하는 일이다.

각 브라우저마다 렌더링 엔진이 다르다. 그렇기 때문에 같은 페이지가 다르게 보이는 경우가 있다
파이어폭스는 모질라에서 직접 만든 게코(Gecko)엔진을 사용하고 사파리와 크롬은 웹킷(Webkit)엔진을 사용한다.
웹킷은 최초에 리눅스 플랫폼에서 작동하기 위하여 제작된 오픈소스 엔진인데 애플이 mac과 windows에서 사파리 브라우저를 지원하기 위해서 수정을 가했다.

좀 더 나은 사용자 경험을 위해 가능하면 빠르게 내용을 표시한다. 그래서 일련의 과정들이 동기적으로 진행되지 않는다. HTML을 파싱 할 때까지 기다리지 않고 렌더트리 배치와 그리기 과정을 시작한다.

렌더링 엔진 동작 과정

1. 렌더링 엔진은 HTML문서를 파싱하여 DOM트리를 구축한다.

2. 외부 CSS 파일과 함께 포함된 스타일 요소를 파싱한다. (CSSOM - Css Object Model)

3. DOM트리와 2번의 결과물을 합쳐 렌더 트리(DOM + CSSOM)를 구축한다.
렌더 트리는 문서를 시각적인 구성 요소로 만들어주는 역할을 한다. 웹킷은 이 구성 요소를 "렌더러" 또는 "렌더 객체"라는 용어를 사용한다.

4. 렌더 트리의 각 노드에 대해 화면 상에서 배치할 곳을 결정한다.
렌더 트리는 위치와 크기를 가지고 있지 않기 때문에, 어느 공간에 위치해야 할지 각 객체들에게 위치와 크기를 결정해준다.

5. UI 백엔드에서 렌더 트리의 각 노드를 그린다.
렌더 트리의 각 객체를 백엔드가 화면의 픽셀값으로 나타낸다.

Javascript는 렌더링 엔진에서 처리가 될까?

아니다. 자바스크립트 엔진이 처리한다. HTML 파서는 스크립트 태그를 만나면 Javascript 코드를 실행하기 위해 DOM 생성 프로세스를 중지하고 자바스크립트 엔진으로 권한을 넘긴다. 제어 권한을 넘겨받은 자바스크립트 엔진은 스크립트 태그 내의 Javascript 코드 또는 src 속성에 정의된 Javascript 파일을 로드하고 파싱 하여 실행한다. Javascript의 실행이 완료되면 다시 HTML 파서로 제어 권한을 넘겨서 중지했던 시점으로 돌아가 DOM 생성을 재개한다.