WEB

브라우저 렌더링 과정

devSoo 2023. 2. 1. 22:46

상황

실제 업무를 하다 보면 브라우저에서 어떻게 렌더링 되는지 간과하기 싶다. 

하지만 연차가 쌓일 수록 성능 최적화 등을 위해 실제로 어떻게 동작하는 지 깊히 아는 것이 중요하다.

2년 전즈음 개발자로 취업을 위해 공부했었는데 가물가물해져 다시 상기 시킬겸 정리한다. 

 

 

목차

1. 브라우저 렌더링 동작 단계

2. 브라우저 렌더링 단계별 상세 내용

  • Parsing
  • Style자바스크립트 파싱과 실행 
  • Layout
  • Paint
  • Composite

3. 요약

1. 브라우저 렌더링 동작과정 개요

브라우저 렌더링의 기본적인 동작은 크게 5단계로 나눌 수 있다.

  1. HTML 파일과 CSS 파일을 파싱해서 각각 Tree를 만든다. (Parsing)
  2. 두 Tree를 결합하여 Rendering Tree를 만든다. (Style)
  3. Rendering Tree에서 각 노드의 위치와 크기를 계산한다. (Layout)
  4. 계산된 값을 이용해 각 노드를 화면상의 실제 픽셀로 변환하고, 레이어를 만든다. (Paint)
  5. 레이어를 합성하여 실제 화면에 나타낸다. (Composite)

각 단계별 상세 내용을 살펴보자 

 

2. 브라우저 렌더링 단계별 상세 

0) 불러오기

인터넷에 주소를 치면 로더(Loader)가 서버로 부터 전달받은 리소스 스트림을 읽는 과정을 거친다. 

 

1) Parsing

위의 과정으로 그 사이트에 알맞은 index.html 파일을 가져오게 되는데,

브라우저가 페이지를 렌더링 하려면 브라우저 렌더링 엔진은 가장 먼저 HTML 파일을 파싱해야 한다.

HTML 문서를 파싱해 브라우저가 이해할 수 있는 자료구조인 DOM(Document Object Model)을 구성한다. 

 

DOM이란 ? 
1) 브라우저 렌더링 엔진은 문자열로 변환된 HTML 문서를 읽고, 이룰 문법적 의미를 갖는 코드의 최소 단위인 토큰으로 분해하고
2) 이 토큰들을 다시 객체로 변환해, 노드를 생성한다. 또한 이 노드들은 트리의 자료구조로 요소 간의 관계를 나타내는데 이러한 노드의 트리 자료 구조를 DOM이라 한다.  

 

HTML을 파싱 중 HTML에 CSS 파일을 로드하는 link 태그나 style 태그를 만나면 DOM 생성을 일시 중단하고 

CSS 파일을 서버로부터 요청하고 HTML과 동일한 파싱과정을 거쳐 CSSOM(CSS Object Model)을 생성한다.

CSS 파싱을 전부 완료한 뒤에 다시 HTML을 파싱해 DOM 생성을 재개한다. 

 

DOM Tree / CSSOM Tree

 

2) Style

Style 단계에서는 Parsing 단계에서 생성된 DOM Tree와 CSSOM Tree를 매칭(결합)시켜 Render Tree를 구성한다.

Render Tree는 렌더링을 위한 트리구조의 자료구조로 브라우저 화면에 렌더링되는 노드만으로 구성된다.

 

예를 들어 Render Tree를 구성할 때 visibility: hidden은 요소가 공간을 차지하고 보이지 않기 때문에 Render Tree에 포함되지만 diplay: none의 경우 제외된다

 


 

 

 

 

여기서 잠깐 자바스크립트는 언제 파싱하냐구?

2- 1) 자바스크립트 파싱과 실행

script 태그를 만나면 마찬가지로 HTML 파싱을 중단하고 자바스크립트 파일을 불러와 파싱한다.

자바스크립트 엔진은 이를 해석해 AST(추상적 구문 트리)를 생성한다.

그리고 AST를 기반으로 인터프리터가 실행할 수 있는 중간 코드인 바이트 코드를 생성해 실행한다. 

3) Layout (Reflow)

Layout 단계에서는 Render Tree를 화면에 어떻게 배치해야 할 것인지 노드의 정확한 위치와 크기를 계산한다. 

루트부터 노드를 순회하며 노드의 정확한 크기와 위치를 계산하고 Render Tree에 반영한다. 

 

4) Paint

Paint 단계에서는 Layout 단계에서 계산된 값을 이용해 Render Tree의 각 노드를 화면상의 실제 픽셀로 변환한다.

이때 픽셀로 변환된 결과는 하나의 레이어가 아니라 여러 개의 레이어로 관리된다. 

스트, 색, 이미지, 그림자 효과 등이 이때 모두 처리되어 그려진다. 

 

5) Composite 

Composite 단계에서는 Paint 단계에서 생성된 레이어를 합성하여 실제 화면에 나타낸다. 

이제 우리는 화면에 웹페이지를 볼 수 있다. 

 

3. 요약

 

1. 브라우저 렌더링 과정은 크게 HTML 파일과 CSS 파일을 파싱해서 각 트리를 만드는 Parsing 단계

2. DOM Tree와 CSSOM Tree을 매칭시켜 Render Tree를 구성하는 Style 단계

3. Render Tree에서 각 노드의 위치와 크기를 계산하는 Layout 단계

4. 계산된 값을 이용해 실제 픽셀로 변환하고 레이어를 만드는 Paint 단계

5. 레이어를 합성해 실제 화면에 나타내는 Composite 단계로 나눌 수 있다. 

 

 

참고 자료