브라우저 렌더링 과정

1. 렌더링 정의

렌더링이란?
사용자 화면에 뷰를 보여주는것

 

2. 렌더링 엔진 & 목표

- 웹브라우저마다 다른 렌더링 엔진

- 렌더링 엔진의 목표

사용자 동작으로 인해서 입력발생, 스크롤발생, 애니메이션 동작, 비동기요청으로 인한 데이터로딩등의 상황

 

3. 렌더링 과정

렌더링엔진은 크게 다음의 과정을 거치는데 이를 Critical Rendrering Path라고 한다.

 

DOM Tree생성

먼저 브라우저에서 사용자가 요청한 웹페이지에 문서를 불러오고 파싱을 한다
1️⃣ 코드는 어휘분석을 통해서 HTML5에 표준으로 지정된 고유한 토큰으로 변환된다

예를 들어 StartTag html이라는 태그는 html이 열렸다라는 의미를 가지고, Endtag body는 body태그가 닫혔다는 의미를 가진다.

2️⃣ 그리고 브라우저 렉싱과정을 통해서 토큰이 해당속성과 규칙을 정의하는 노드객체로 변환된다.

3️⃣ 각 노드가 서로 연관성을 가질수 있도록 트리를 생성하는데 이게바로 DOM트리이다.
HTML에 있는 모든 것들은 이 DOM을 구성하는데, 먼저 최상위에는 document 객체가 들어간다.
태그는 element 노드가 되고, 태그의 요소는 attribute 노드, 텍스트는 text 노드가 되어 트리구조를 생성한다. 이외의 주석도 comment 노드가 되어 생성된다.

 

CSSOM 생성

브라우저는 문서를 파싱하는 과정에서 자바스크립트나 css같이 추가로 필요한 파일들을 불러오도록 요청하기도 한다. HTML을 DOM 트리로 만드는 과정과 비슷하게, CSS에서는 CSSOM 트리가 만들어진다.

CSSOM은 DOM이 어떻게 화면에 표시될지를 알려주는 역할을 한다.
CSS도 위에서 아래로 스타일 규칙이 정해지기 때문에 또한 트리구조를 가지고 있다.

예를 들어 스타일시트에서 body태그에 text-align이라는 속성을 정해뒀다면 body의 자식요소들에게도 동일한 속성이 적용된다.

 

DOM트리 + CSSOM트리 = Render Tree

렌더링엔진이 DOM트리와 CSSOM트리를 합쳐서 Render Tree라는 것을 만들게 된다

렌더트리가 만들어지는 과정: document 객체부터 각 노드를 순회하면서 각각에 맞는 CSSOM을 찾아서 규칙을 적용한다. 그러면서 렌더와 관련된 요소들을 렌더트리에 포함시키게 된다.
(이때 meta태그나 display:none 속성을 가진 요소들은 렌더와 관계가 없기 때문에 렌더트리에 포함되지 않는다.)

 

layout 과정

렌더트리가 생성되었다면 layout과정을 거친다. (= reflow라고도 한다)
뷰포트내에서 요소들에 정확한 위치와 크기를 계산하는 과정이다.
박스모델에 따라서 텍스트나 요소의 박스가 화면에서 차지하는 영역이나 여백 그리고 이외의 스타일 속성이 계산된다.

 

paint 과정

레이아웃 과정에서 렌더링 엔진이 각 요소들이 어떻게 생겼고 이를 어떻게 보여줄지 알게 되면 마지막으로 화면에 실제 픽셀로 그려지도록 변환하는 과정을 거치는데 이것이 페인트과정이다.
이과정에서 렌더트리에 포함된 요소들이나 텍스트, 이미지들이 실제 픽셀로 그려진다.

Critical Rendering Path의 시간을 줄이면 브라우저가 웹페이지를 보여주는데 걸리는 시간도 줄일 수 있다.

 

리렌더링

사용자 동작으로 자바스크립트가 실행되어서 css가 변경되거나 애니메이션 동작이 일어나면 어떻게 될까?

 

1. 다시 layout이 발생하는 경우

보통 요소의 크기나 위치가 바뀔 때 or 브라우저 창의 크기가 바뀌었을 때 그림의 순서에 따라서 레이아웃이 다시 발생한다. 이때 레이아웃 수치를 다시 계산해서 배치를 해야되기 때문에 레이아웃 과정이 다시 발생하고 이에 맞춰서 다시 페이트도 해줘야하고 레이어를 합성하는 과정까지 거쳐야한다.

2. paint부터 다시 발생되는 경우

배경이미지나 텍스트색상, 그림자와 같이 실제 레이아웃의 수치를 변화시키지 않는 스타일의 변경이 일어났을 때 발생한다. 이와같은 경우는 레이아웃 과정이 발생하지 않기 때문에 성능상으로 좀 더 이점이 있다.

3. 레이어의 합성만 다시 발생하는 경우

레이어는 포토샵의 레이어와 비슷하게 페인팅할 영역을 나누어 놓는것을 의미한다. 크롬의 경우 레이아웃 과정 이후에 정해진 기준이나 필요에 의해서 브라우저가 레이어를 생성한다. 그리고 렌더트리에 있는 노드 객체들은 생성된 레이어에 포함되게 된다. 레이어들은 트리형태로 구성된다. 이 렌더링 엔진이 각 레이어를 프린팅 과정에서 각각 그려 준 다음에 하나의 비트맵으로 합성해서 페이지를 완성한다. 이때 경우는 레이아웃과 페인트과정도 수행하지 않고 레이어의 합성만 발생하기 때문에 성능상으로 가장 큰 이점을 가지게 된다.

 

 

✅ 정리

웹 페이지를 브라우저에서 보여주기 위해서는 브라우저 렌더링 과정을 거쳐야 합니다. 브라우저 렌더링 과정은 다음과 같은 단계로 이루어집니다.

1. HTML 문서 파싱: 브라우저는 HTML 문서를 파싱하여 DOM(Document Object Model) 트리를 생성합니다. DOM 트리는 HTML 문서의 구조와 내용을 표현하는 트리 구조입니다.
2. CSS 문서 파싱: 브라우저는 CSS 문서를 파싱하여 CSSOM(CSS Object Model) 트리를 생성합니다. CSSOM 트리는 CSS 스타일 정보를 표현하는 트리 구조입니다.
3. 렌더 트리 생성: 브라우저는 DOM 트리와 CSSOM 트리를 결합하여 렌더 트리(Render Tree)를 생성합니다. 렌더 트리는 브라우저가 실제로 화면에 그리는 요소들의 집합이며, 화면에 보여줄 요소들만 포함합니다.
4. 레이아웃(Layout): 브라우저는 렌더 트리를 기반으로 요소들의 크기와 위치를 계산합니다.
5. 페인팅(Painting): 브라우저는 레이아웃 계산 결과를 기반으로 화면에 요소들을 그립니다.

브라우저 렌더링 과정은 이러한 단계를 반복하면서, 화면에 표시할 요소들을 계속해서 그리고 업데이트합니다. 이 과정에서, JavaScript 코드가 실행되거나 이미지와 같은 외부 리소스가 로드되는 경우에는 브라우저 렌더링 과정이 일시적으로 멈추거나 지연될 수 있습니다. 이러한 경우에는 사용자가 대기하는 동안 로딩 상태를 표시하는 등의 UI 처리가 필요합니다.

 

 

✍️강의를 듣고 직접 기록하고 정리한 내용입니다📚
우아한Tech 체프의 브라우저 렌더링
코트팩토리 CSR, SSR