브라우저 렌더링 과정

브라우저 렌더링 과정

브라우저 - 웹 페이지, 이미지, 비디오 등의 콘텐츠를 수신, 전송 및 표현하는 소프트웨어(크롬,사파리,엣지 등) / 사용자가 선택한 자원(URL)을 서버에 요청하고 받아 화면에서 표시

렌더링 - HTML, CSS JavaScript 등 개발자가 작성한 문서를 브라우저에서 시각적 형태로 출력하는 과정

 

브라우저의 렌더링은 다음과 같이 이루어 진다.

1.DOM(Document Object Model),CSSOM(CSS Object Model) 트리 구축
2.자바스크립트 파싱
3.렌더링 트리 구축

4.레이아웃 생성
5.페인팅

 

1. DOM 트리 구축

네트워크를 통해 오고가는 데이터는 기본적으로 0과 1로 이루어진 바이트 코드이다.
그렇기 때문에 응답 받은 HTML을 텍스트로 변환하는 과정이 필요하다.

 

1.브라우저는 바이트 코드를 html에 명시된 인코딩 방식(ex: UTF-8)으로 문자열로 변환
2.문자열로 변환된 HTML 문서를 읽어 들여 문법적 의미를 갖는 코드의 최소 단위인 토큰들로 분해
3.토큰들의 내용에 따라 객체로 변환하여 노드를 생성(브라우저가 이해할 수 있고, 메모리에 보관할 수 있는 객체로 변환시킨다. 객체로 변환 후 Tree 구조를 생성하는데 이것이 DOM이다.)

 

1. CSSOM 트리 구축

위와 같이 DOM을 생성하는 중 외부 CSS를 참조하는 <link> 태그, <style> 태그를 만나게 되면 브라우저에 리소스를 요청하고 DOM을 생성하는 과정 그대로 CSSOM을 생성하고 다시 DOM 생성을 이어나간다.

 

2. 자바스크립트 파싱

렌더링 엔진은 HTML 문서를 처음부터 한 줄씩 순차적으로 파싱하여 DOM을 생성해나가는데 CSSOM과 같이 <script> 태그를 만나면 DOM생성을 일시 중단하고 파싱이 끝난후 DOM 생성을 이어나간다.

브라우저의 자바스크립트 엔진은 서버로부터 응답된 자바스크립트를 파싱하여 AST(Abstract Syntax Tree, 추상 구문 트리)를 생성하여 바이트 코드로 변환하여 실행. 이 때 자바스크립트는 DOM API를 통해 DOM이나 CSSOM을 변경할 수 있으며 변경된 DOM과 CSSOM은 다시 렌더 트리로 결합된다.

 

3. 렌더링 트리 구축

DOM 및 CSSOM을 결합하여 렌더링 트리 형성
렌더링 트리에는 실제 화면에 표현되는 요소들로만 구성

4. 레이아웃

렌더 트리에 있는 요소들의 위치나 크기와 관련된 정보들을 요소들이 전체 화면에서 어디에, 어떤 크기로 배치되어야 할지를 렌더트리의 윗 부분부터 아래로 내려가며 계산을 진행한다. 값들은 절대적인 단위인 px값으로 변환된다.

 

5. 페인팅

레이아웃 단계에서 모든 계산이 완료가 되면 화면에 요소들을 그리게 된다.

출처
https://developers.google.com/web/fundamentals/performance/critical-rendering-path/constructing-the-object-model?hl=ko
https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction?hl=ko