IT지식: 브라우저의 개념과 동작 원리 요약 - 파싱과 렌더링 엔진

브라우저

WWW(World Wide Web)에 기반한 인터넷 정보를 볼 수 있게 해주는 응용 프로그램.

가장 많이 이용되는 소프트웨어이며

현재 인터넷 익스플로러, 파이어폭스, 사파리, 크롬 등이 서비스 중이다

 

브라우저의 기능

사용자가 선택한 자원을 서버에 요청하면 브라우저에 표시한다

자원의 주소는 URI(Uniform Resources Identifier)에 의해 정해진다

W3C(World Wide Web Consortium, 웹 표준화 기구)에서 정한 명세에 따라

HTML과 CSS를 해석해 브라우저에 표시한다

 

브라우저의 구조

사용자 인터페이스(UI)	주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등 요청 페이지를 제외한 모든 부분
브라우저 엔진	사용자 인터페스와 렌더링 엔진 사이 동작 제어
렌더링 엔진	요청한 컨텐츠를 표시 (HTML을 요청하면 HTML과 CSS를 파싱해 화면에 띄운다)
통신	HTTP 요청과 같은 네트워크 호출에 사용됨, 플랫폼 독립적인 인터페이스(말단에서 실행됨)
UI 백엔드	OS 사용자 인터페이스 체계를 사용해 콤보 박스 창이나 기본적인 장치를 띄움
자바스크립트 해석기	자바스크립트 코드를 해석하고 실행
자료 저장소	자료를 저장하는 계층. 하드 디스크(데이터 베이스)에 저장한다

 

렌더링 엔진

브라우저에서 가장 중요한 기능은 사용자가 원하는 정보를 보여주는 것인데

렌더링 엔진은 이 요청한 컨텐츠를 표시하는 기능을 수행한다

파싱을 통해 만든 렌더 트리를 토대로 페이지를 구성한다

빠른 구성을 위해 트리를 완성하지 않아도 부분적인 렌더링 작업을 한다

 

파싱

문서 파싱은 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것을 의미한다.

div{
   color: red;
}

컴퓨터는 사람처럼 위의 CSS 코드를 보고

div 태그의 텍스트가 빨강이라는 것을 바로 알아차리지 못한다

컴퓨터는 필요한 부분을 가져와 해석하는 과정이 필요하다

[어휘 분석기]를 사용해 구문 분석

해석에 필요없는 부분인 띄어쓰기는 버려주고

div color red 또는 { : ; } 같은 실질적 부분(token)을 가져온다

이 어휘들을 모아 구문 규칙에 따라 문서 구조를 분석(구문 분석)하고

정보를 토대로 DOM과 CSSOM을 생성 후 결합해 노드 트리를 만든다(파싱 트리 or 렌더 트리).

트리는 다시 기계어로 변환된다.

 

자바스크립트 해석기

자바스크립트 엔진은 <script> 태그를 해석해 AST(추상적 구문 트리)를 생성하고

AST를 기반으로 중간 코드인 바이트 코드를 생성한다(JIT, just-in-time 컴파일러).

이후 DOM API를 통해 자바스크립트 정보를 렌더 트리에 결합한다

* 브라우저마다 동작이 상이하므로 하나의 예시로 생각해주시기 바랍니다

 

 

참고한 글들

JavaScript 동작원리를 살펴봅시다

JavaScript, 인터프리터 언어일까?

브라우저는 어떻게 동작하는가