브라우저 기본 동작원리

브라우저란? HTML 문서와 그림, 멀티미디어 파일 등의 콘텐츠를 검색 및 표현하는 소프트웨어를 말한다.

북한의 문화어로 열람기라고 말하는데 잘 해석한 말 같다.

브라우저의 주요 기능

사용자가 요청한 자원들을 서버에서 요청하여 브라우저에 가져오는 일을 한다.

요청한 자원이 HTML, XML, Image 등등 다양한 형태로 서버로부터 가져온다.

브라우저는 HTML과 CSS 명세에 따라 html 파일을 해석해서 브라우저의 렌더링 한다.

이 '명세'는 웹 표준화 기구인 W3C(World wide web Consortium)에서 정해짐.

이때 렌더링 하는 과정을 보자면

브라우저 렌더링

서버로부터 다운로드한 HTML과 CSS을 파싱 하여 Object Model로 만든다.

1. HTML -> DOM, CSS -> CSSOM으로 만든 뒤에 DOM, CSSOM을 바탕으로 Rander Tree를 만든다.

렌더링 과정

이때 Render Tree를 보면 DOM에 있는 html과 head 부분이 생략되어 있다.

이것은 Render Tree는 실제 화면에 렌더링 되는 노드(요소)들로만 구성된다는 점을 알 수 있다.

그 외에 실제 렌더링 되지 않는 CSS 속성들이 있는데

display : none속성이 설정된 노드는 어떤 공간도 차지하지 않아 Render Tree를 만드는 과정에서 제외.
visibility : invisible속성은 비슷하게 동작하지만 , 공간은 차지하고 요소가 보이지 않게만 하기 때문에 Render Tree에 포함됨.

 

2. 이후에 Layout 단계로 넘어간다. Layout 단계는 브라우저의 Viewport(브라우저에 DOM이 출력되어 볼 수 있는 곳) 내에서 각 노드들의 정확한 위치와 크기를 계산한다.

이때 CSS에서 설정한 %, vh, em 등은 px로 변환된다.

 

3. 요소들로 실제 화면을 그리게 된다.

이전 단계에서 이미 요소들의 위치와 크기, 스타일 계산이 완료된 Render Tree를 이용해 실제 픽셀 값을 채워 넣는다.

이때 텍스트, 색, 이미지, 그림자 효과 등이 모두 처리되어 그려진다.

추가로 전송을 받고 기다리는 동시에 받은 내용을 먼저 화면에 보여준다 (우리가 웹페이지에 접속할 때 한꺼번에 뜨지 않고 점점 화면에 나오는 것이 이 때문!!!)

정리하자면, 서버로부터 다운로드한 HTML, CSS를 각각 DOM과 CSSOM으로 만든 뒤 Rander Tree를 생성하고 Layout 단계에서 뷰포트에 맞는 위치와 크기를 만들고 뷰포트에 출력한다.

브라우저 기본구조

브라우저 구조

 

사용자 인터페이스(UI)

크롬이나 익스플로러를 실행하면 요청한 페이지를 보여주는 창을 제외한 모든 부분으로 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등이 이에 해당한다

 

브라우저 엔진

사용자 인터페이스와 렌더링 엔진 사이에서 동작을 제어하는 역할을 한다.

 

렌더링 엔진

위에서 브라우저 렌더링 과정을 수행하는 엔진이다.

 

통신

http 같은 네트워크 통신의 관련된 역할을 한다.

 

자바스크립트 해석기

말 그대로 JavaScript 언어를 해석하고 실행하는 역할을 한다.

 

UI 백엔드

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

 

자료 저장소

쿠키, 세션, 로컬 스토리지 등 모든 종류의 자원을 하드 디스크에 저장하는 계층