브라우저의 렌더링(입문편)

오늘은 브라우저가 어떻게 화면을 렌더링 하는지를 알아보고자 합니다. 아마 흔히 보셨을 내용이지만 기억해두기 위해 책과 여러 사이트를 참고하여 정리해보았습니다. (compositor thread까지 다루는 심화편이 있으니 같이 보시면 더 풍부한 이해를 하실 수 있습니다 🤓 )

 

본격적인 내용으로 들어가기 전에 과정을 간단히 보여드리겠습니다. 브라우저의 렌더링은 아래와 같은 순서로 이루어집니다.

1. 서버에서 HTML 파일을 수신
2. HTML 파싱
   1. DOM 트리 생성
   2. CSSOM 트리 생성
   3. 자바스크립트 파싱 및 실행
3. DOM과 CSSOM을 결합하여 렌더트리 생성
4. 레이아웃
5. 페인트

1. 서버에서 HTML 파일을 수신

우리가 www.example.com이라는 주소로 접근한다고 가정해봅시다. 이렇게 호스트명으로만 구성된 요청에 대해 서버는 암묵적으로 index.html을 응답하도록 기본 설정이 되어있습니다. www.example.com/index.html라는 주소로 접근한 것과 마찬가지죠.

그렇게 우리는 가장 먼저 HTML 파일을 받아오게 됩니다.

2. HTML 파싱

2-1. DOM 트리 생성

브라우저는 HTML을 파싱하기 시작하며 DOM 트리를 생성해갑니다. 여기서 DOM 트리는 브라우저가 HTML을 이해할 수 있도록 만든 트리 자료구조입니다. 브라우저가 HTML 요소들을 제어하는 데 필요한 메서드나 변수를 담고 있습니다. (자세한 과정이 궁금하다면 제 글을 참고해주세요 ㅎㅎ)

이때 외부 리소스를 로드하는 태그(<link>, <script>, <img>)를 만나면 DOM 생성을 일시중단하고 해당 리소스 파일을 서버로 요청합니다. 이때 css, font, javascript, img 같은 리소스들을 받아오는 것이죠.

2-2. CSSOM 트리 생성

출처: web.dev (http://bit.ly/3137pmh)

방금 전 살펴본것처럼 DOM 트리를 생성해나가다 CSS를 로드하는 link, style 같은 태그를 만나면 DOM 생성을 중단하고 CSS를 파일을 불러옵니다. 그리고 HTML과 동일한 과정을 통해 CSSOM을 생성합니다. 이렇게 CSS 파싱이 완료되면 이전에 HTML 파싱이 중단된 시점부터 DOM 생성을 재개합니다.

2-3. 자바스크립트 파싱 및 실행

자바스크립트를 로드할때에도 역시 DOM 트리 생성을 중단시킵니다. 자바스크립트 파일을 로드하는 script 태그를 만났을 때 말이죠. 브라우저는 자바스크립트 파싱을 위해 렌더링 엔진에서 자바스크립트 엔진으로 제어권을 넘기게 됩니다.

 

자바스크립트 엔진은 자바스크립트 코드를 파싱하여 CPU가 이해할 수 있는 저수준 언어로 변환 및 실행합니다. 자바스크립트 파싱과 실행이 종료되면 렌더링 엔진으로 다시 제어권을 넘겨 HTML 파싱이 중단된 시점부터 DOM 생성을 재개합니다.

3. DOM과 CSSOM을 결합하여 렌더트리 생성

출처: web.dev (http://bit.ly/3137pmh)

브라우저의 렌더링 엔진은 DOM과 CSSOM을 결합하여 렌더트리를 생성합니다. 렌더트리는 화면에 표시될 요소들만 담고 있습니다. 즉, 브라우저 화면에 렌더링되지 않는 요소들 (ex, display:none) 은 포함하지 않습니다.

 

렌더트리는 다음 단계인 layout과 paint 단계에 사용됩니다.

4. 레이아웃

레이아웃 단계에서 각 요소들이 브라우저에서 어떤 크기로 어디에 배치될지가 결정됩니다.

출처: web.dev (http://bit.ly/3137pmh)

5. 페인트

이제 실제로 화면이 그려질 차례입니다. 브라우저는 레이아웃 단계에서 계산된 요소들을 실제 화면의 픽셀로 변환합니다. 이때 텍스트, 색깔, border 같은 모든 부분이 그려집니다.

 

이 때 처리해야 하는 스타일이 복잡할수록 소요 시간이 늘어나게 됩니다. 예를 들어 단색 background-color의 경우 속도가 빠르지만 그라데이션이나 그림자 효과등은 비교적 더 오래 소요됩니다.

리플로우와 리페인트

오늘날의 웹페이지는 동적인 컨텐츠로 이루어져 있습니다. 따라서 렌더링이 끝났다고 해서 모든 것이 끝난 것은 아닙니다. 클릭 이벤트나 AJAX 같은 동적인 이벤트를 통해 화면의 구성이 바뀔 수 있습니다.

 

예를 들어, 버튼을 클릭하면 상자가 커진다면 레이아웃이 다시 일어날 수 있고 페인트 과정도 다시 일어납니다. 이를 각각 리플로우와 리페인트라고 합니다. layout과 paint를 재반복하는 것은 렌더링 속도를 느리게 만드는 주범입니다.

 

변화된 내용을 한번에 적용시킬 수 있는 react와 virtual dom 개념이 주목받게 된 이유이기도 합니다. 다음 포스팅에서 이 부분에 대해서도 다뤄보겠습니다.

 

추가로 reflow와 repaint를 줄이기 위해 알아두어야 할 내용을 잘 적은 블로그가 있어 첨부하였습니다.

 

 

출처

mdn how browsers work

[도서]모던자바스크립트 deep dive

박스여우 블로그

Leitmotif.log