브라우저 렌더링 과정

브라우저 렌더링 과정

렌더링이란 ?

HTML, CSS, JS 등 개발자가 작성한 문서가 브라우저에서 출력되는 과정을 말한다.

브라우저 마다 다르지만, 브라우저는 렌더링을 수행하는 렌더링 엔진을 가지고 있다.

Chrome Safari Firefox Blink Webkit Geeko

렌더링 과정

사용자가 브라우저를 통해 웹 사이트에 접속하면, 서버로부터 HTML, CSS 등 웹사이트에 필요한 리소스들을 다운받는다.

브라우저가 페이지를 렌더링 하려면 먼저 HTML 코드는 DOM, CSS는 CSSOM 트리를 생성해야 한다.

# DOM 트리 생성

다음은 HTML 코드가 DOM 트리로 변환하는 과정이다.

https://bit.ly/2WochoN

변환

브라우저가 HTML의 원시 바이트를 읽어와서, HTML에 정의된 인코딩(utf-8)에 따라 개별 문자로 변환

브라우저가 HTML의 원시 바이트를 읽어와서, HTML에 정의된 인코딩(utf-8)에 따라 개별 문자로 변환 토큰화

브라우저가 문자열을 W3C 표준에 지정된 고유 토큰으로 변환

브라우저가 문자열을 W3C 표준에 지정된 고유 토큰으로 변환 렉싱

방출된 토큰은 해당 속성 및 규칙을 정의하는 '객체'로 변환

방출된 토큰은 해당 속성 및 규칙을 정의하는 '객체'로 변환 DOM 생성

마지막으로 HTML 마크업에 정의된 여러 태그 간의 관계를 해석해서 트리 구조로 연결된다.

# CSSOM 트리 생성

HTML 마크업 내에 직접(inline) 스타이릉ㄹ 선언 할 수도 있지만, head 태그에 외부(external) css 파일을 참조하거나, head 태그에 style 태그(internal) 를 정의 할 수 있다. HTML 과 마찬가지로 외부 (external) css 파일에 정의된 스타일과 style 태그에 작성된 스타일을 브라우저가 이해하고 처리할 수있는 형식으로 변환해야 한다.

DOM 트리를 생성하는 과정과 동일한 과정으로 CSSOM 트리를 생성

https://bit.ly/2Vg5Nb0 https://bit.ly/2WxQefH

# 렌더링 트리(Rendering Tree) 생성

DOM 트리와 CSSOM 트리가 만들어지면, 이 둘을 결합해서 렌더링 트리를 생성한다.

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

https://bit.ly/3iQ3ovQ

# 레이아웃 (Layout) 단계

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

모든 상대적인 측정 값은 화면에서 절대적인 픽셀로 변환된다.

https://bit.ly/3xdGFyN

# 페인팅 단계

마지막으로 렌더링 트리의 각 노드를 화면의 실제 픽셀로 변환하게 된다. 레이아웃 단계에서 모든 계산이 완료가 되먄, 화면에 요소들을 그리게 된다. 이 단계를 '페인팅' 또는 '래스터화' 라고 한다

이미 레이아웃 단계에서 각 노드들이 위치, 크기, 색상 등 스타일이 모두 계산이 되었기 때문에 화면에 실제 픽셀로 변환하게 된다.

from http://zezihi.tistory.com/4 by ccl(A) rewrite - 2021-11-22 02:00:59