브라우저란?
- 브라우저란 월드 와이드 웹(WWW)에서 정보를 검색, 표현하고 탐색하기 위한 소프트웨어이다.
- 예를 들어, 구글 크롬, 인터넷 익스플로러 등과 같이 검색창이 있는 프로그램이라 생각하면 된다.
- 브라우저는 인터넷에서 특정 정보로 이동할 수 있는 주소 입력창(인터페이스)이 있고, 서버와 HTTP로 정보를 주고 받을 수 있는 네트워크 모듈도 포함하고 있다.
- 서버에서 받은 문서(HTML, CSS, Javascript)를 해석하고 실행하여 화면에 표현하기 위한 해석기(Parser)들을 가지고 있습니다.
브라우저의 역할
- 사용자가 입력한(원하는) 웹페이지, 이미지, 동영상 등의 자원을 서버에게 요청하는 역할
- 서버로부터 전달(응답)받은 자원을 화면에 출력하는 역할
브라우저 구성 요소
참고로, 크롬 브라우저는 크게 Blink라는 렌더링 엔진과 V8이라는 자바스크립트 엔진을 가지고 있다
브라우저 엔진이란?
- 웹 브라우저의 핵심이 되는 구성 요소
- 브라우저 엔진은 간단히 말하면 주로 HTML, CSS 등 웹 페이지 구성을 위한 자료를 해석하여 사용자의 장치에 맞게 시각적인 표현으로 변환하는 역할
레이아웃 엔진 / 렌더링 엔진
- 브라우저 엔진은 레이아웃 엔진, 렌더링 엔진이라고도 불린다.
- 렌더딩과 레이아웃은 별도 엔진의 의해 관리될 수 있으나 실제로 이 둘은 서로 밀접히 연결되어 있고 브라우저 엔진과 같이 묶어서 이야기하는 경우가 많다.
렌더링이란?
- 사용자가 요청한 컨텐츠를 표시하는 역할. 예를 들어 HTML을 요청하면 HTML, CSS를 파싱하여 화면에 표시하는 역할
브라우저 엔진 작동 방법
브라우저 엔진의 종류에 따라 다소 다르지만 대체로 아래와 같은 방법으로 동작한다.
- 유저의 요청을 받아서 서버에 자료를 요청한다.
- 서버에서 받은 자료를 기반으로 브라우저 엔진은 렌더링 엔진을 통해 번역된 자료를 표현하게 된다.
- HTML을 파싱하여 DOM 노드를 만들고 이들을 합쳐서 DOM 트리를 만든다.
- CSS를 파싱하여 스타일 규칙을 만든다.
- DOM 트리와 스타일 규칙을 결합해 렌더 트리를 만든다.
- UI 백엔드에서 렌더 트리를 그리게 되고, 화면에 우리가 볼 수 있도록 렌더 트리를 배치(Layout)하고 화면에 그려낸다(Painting).
파싱 / 파서
파싱은 서버로부터 전송 받은 문서의 문자열을 브라우저가 이해할 수 있는 구조로 변환하는 과정을 말한다.
파싱 결과는 문서 구조를 나타내는 노드 트리인데 파싱트리 또는 문법트리라고 도 한다.
그리고 이러한 파싱을 담당하는 것을 파서라고 한다.
브라우저 엔진 작동 과정 예시
웹킷 렌더링 엔진
다양한 종류의 렌더링 엔진이 존재하지만, 이번 포스팅에서는 웹킷 엔더링 엔진만 다룰 것이다.
1. DOM 트리 구축
문서 소스로부터 파싱 트리를 만드는 과정 / DOM 트리 예시
- 브라우저는 서버로부터 HTML 문서를 모두 전달 받는다.
- 어휘와 구문을 분석하여 HTML 문서를 파싱하고, 파싱 트리를 생성한다. 문서 파싱은 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것을 의미한다.
- 파싱 트리를 기반으로 DOM 요소와 속성 노드를 가지는 DOM 트리를 생성한다.
2. CSSOM(CSS Object Model) 생성
CSS 파싱
- DOM을 생성할 때 거쳤던 과정을 그대로 CSS에 반복한다.
- 그 결과로 브라우저가 이해하고 처리할 수 있는 형식(Style Rules)으로 변환된다.
3. 렌더 트리(DOM + CSSOM) 생성
DOM 트리와 렌더 트리
- DOM Tree가 구축이 되어가는 동안 브라우저는 DOM Tree를 기반으로 렌더 트리를 생성 한다. 문서를 시각적인 구성요소로 만들어주는 역할을 한다.
4. 렌더 트리 배치
- 렌더링 트리는 위치와 크기를 가지고 있지 않기 때문에, 객체들에게 위치와 크기를 결정해준다.
5. 렌더 트리 그리기
- 렌더 트리의 각 노드를 화면의 픽셀로 나타낸다.
- 렌더 트리 그리기가 완료되면, 화면에 콘텐츠가 표현된다.