브라우저 렌더링 과정

Jiwon Yoo·2023년 9월 21일

CS

목록 보기

2/6

Critical Rendering Path

웹 브라우저가 웹 페이지를 출력하기 위해서는 서버로부터 HTML 파일을 다운받아서 사용자의 화면에 그려내기까지 많은 과정을 거치는데, 이 과정을 Critical Rendering Path(CRP)라고 한다.

브라우저 렌더링 동작 과정

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

Parsing

1. DOM Tree 생성

브라우저의 렌더링 엔진은 HTML을 파싱해서 브라우저가 이해할 수 있는 트리 형태의 자료구조인 DOM(Document Object Model)을 생성한다.
*여기서 DOM은 HTML을 완전히 파싱해서 객체 형태로 나타낸 것

2. CSSOM Tree 생성

브라우저의 렌더링 엔진이 HTML을 한 줄씩 파싱하면서 DOM을 생성하다가 link 태그나 style 태그를 만나면 HTML 파싱 및 DOM 생성을 잠시 멈춘다. 그 다음에 로드된 CSS 파일이나 style 태그 내부의 CSS를 파싱하면서 CSSOM(CSS Object Model)을 생성한다. 이 과정이 완료되면 다시 HTML 파싱 및 DOM 생성을 재개한다.

3. Javascript 실행

HTML을 파싱하다가 script 태그를 만나면 진행하던 파싱을 중단(Blocking)하고 자바스크립트 파일을 로드한 다음 자바스크립트 엔진에 제어권을 넘겨서 자바스크립트 파싱과 실행을 한 후에 완료되면 렌더링 엔진으로 다시 제어권을 넘긴다. 그 후 HTML 파싱이 중단된 지점부터 다시 파싱을 시작해서 DOM과 CSSOM 생성을 재개한다.

Style - Render Tree 생성

DOM과 CSSOM의 생성과 자바스크립트 파일의 실행이 완료되었다면 이것을 조합해서 최종적으로 웹 페이지에 렌더링될 트리를 생성하는데, 이를 Render tree라고 한다.

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

Layout

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

Paint

Paint 단계는 웹 페이지에서 눈에 보이는 요소들을 화면에 출력될 픽셀들로 변환한다. Painting에 소요되는 시간은 DOM의 크기와 CSSOM의 스타일 종류에 따라 달라진다

Composite

Paint 단계에서 생성된 레이어를 합성하여 실제 화면에 나타내는 단계로, 사용자가 화면에서 웹 페이지를 볼 수 있다.

+

Reflow와 Repaint

렌더링 완료 후 이벤트가 발생해서 미리 작성된 자바스크립트 내의 DOM API가 실행되면, 이로 인해 변경된 내용이 DOM과 CSSOM에 적용된다. 그리고 이 후 다시 렌더 트리를 생성하고 Layout 구성과 Painting 과정을 다시 거치게 된다. 이때 Layout을 다시 구성하는 과정을 Reflow, Paint를 다시하는 과정을 Repaint라고 한다.

여기서 포인트는 Reflow와 Repaint가 항상 동기적으로 같이 동작하지는 않는다는 점이다. 레이아웃에 영향이 없는 렌더 트리의 변경일 경우에는 Repaint만 동작한다. 그리고 Reflow와 Repaint을 포함하는 리렌더링은 성능적으로 많은 리소스를 사용하는 작업이기 때문에 최대한 리렌더링이 발생하지 않도록 관리하는 것이 필수적이다.