etc. 브라우저의 렌더링 과정

** 렌더링이란?

HTML,CSS, 자바스크립트 등 개발자가 작성한 문서가 브라우저에서 출력되는 과정.

브라우저는 렌더링을 수행하는 렌더링 엔진을 가지고 있음.

 

<렌더링 엔진>

크롬	블링크(Blink)
사파리	웹킷(Webkit)
파이어폭스	게코(Gecko)

 

브라우저를 통해 웹 사이트에 접속하면,

서버로 부터 HTML, CSS 등 웹 사이트에 필요한 리소스를 다운로드받음.

 

 

 

1. DOM / CSSOM 트리 생성

 

 

브라우저가 렌더링 하기 위해서

HTML 코드는 DOM, CSS는 CSSOM 트리를 생성해야 함.

 

 

** DOM 이란 무엇인지?

 

document object model의 약자이며, 한글로는 "문서 객체 모델"이라고 부름.

DOM은 객체 지향 모델로써 구조화된 문서를 표현하는 방식.

 

 

변환 : 브라우저가 HTML의 원시 바이트를 읽어와서, HTML에 정의된 인코딩(예: UTF-8)에 따라 개별 문자로 변환합니다. 토큰화 : 브라우저가 문자열을 W3C 표준에 지정된 고유 토큰으로 변환합니다. 렉싱 : 방출된 토큰은 해당 속성 및 규칙을 정의하는 “객체”로 변환됩니다. DOM 생성 : 마지막으로 HTML 마크업에 정의된 여러 태그 간의 관계를 해석해서 트리 구조로 연결이 됩니다.

브라우저는 HTML 마크업을 처리 할 때 마다 위의 모든 단계를 수행함.

 

 

즉, 

bytes -> character -> token ->  node -> DOM 의 과정을 통해 DOM트리를 생성한다.

 

 

CSSOM(CSS Object Model)을 생성하는 방법도 DOM과 동일하다.

bytes -> character -> token ->  node -> CSSOM 의 과정을 통해 CSSOM 트리를 생성한다.

 

 

 

2. 렌더링 트리 생성

DOM 트리와 CSSOM 트리가 만들어지면, 그 둘을 결합한 '렌더링 트리'를 생성

렌더링 트리에는 페이지를 렌더링 하는데 필요한 노드만 포함됨.

 

 

 

 

3. 레이아웃(Layout) 단계

레이아웃 단계에서는 뷰포트 내에서 각 요소의 정확한 위치와 크기를 정확하게 캡처하는 Box 모델이 출력됨.

-> 모든 상대적인 측정값은 절대적인 값인 px(픽셀)단위로 변환됨.

 

 

** 뷰포트 (viewport) 

모바일 브라우저들은 viewport로 알려진 가상의 window상에 페이지를 렌더링한다.

즉, 뷰포트 = 화면 Display상의 표시 영역을 뜻한다.

 

 

4. 페인팅 단계

마지막으로 렌더링 트리의 각 노드를 화면의 실제 픽셀로 변환함.

전 단계이누레이아웃 단계에서 모든 계산이 완료가 되면, 화면에 요소들을 그리는데,

이 단계를 “페인팅” 또는 “래스터화”라고 합니다.

 

래스터화(영어: Rasterisation 또는 Rasterization)는 벡터 그래픽 형식(쉐이프)으로 설명된 이미지를  래스터 이미지(픽셀, 점 또는 선 시리즈, 함께 표시될 때 도형을 통해 표현된 이미지를 생성하는 작업)로 변환하는 작업) cr:  https://ko.wikipedia.org/wiki

 

 

 

 

+) 추후 수정 예정 - 읽어보기.

 

 

 

REFERENCE

 

https://ko.wikipedia.org/wiki/%EB%AC%B8%EC%84%9C_%EA%B0%9D%EC%B2%B4_%EB%AA%A8%EB%8D%B8

문서 객체 모델 - 위키백과, 우리 모두의 백과사전

https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction

DOM 소개 - Web API | MDN

https://medium.com/%EA%B0%9C%EB%B0%9C%EC%9E%90%EC%9D%98%ED%92%88%EA%B2%A9/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%9D%98-%EB%A0%8C%EB%8D%94%EB%A7%81-%EA%B3%BC%EC%A0%95-5c01c4158ce

브라우저의 렌더링 과정