참고블로그
참고블로그2

브라우저 렌더링 과정 간단히 알아보기

저번 면접 때 브라우저 렌더링 과정을 리렌더링 과정과 헷갈려서 헛소리를 하다 온 경험이 있다. 마침 유튜브에서 괜찮은 자료도 봤고(테코톡) 찾아서 공부해놓는 것이 좋을 것 같아 간단히라도 정리하려고 써본다.

면접용 정리

• HTML 파일과 CSS 파일을 파싱해서 각각 DOM Tree로 만드는데 파싱이라고 합니다. 그리고 두 트리를 결합하여 렌더링 트리를 만드는데 이를 스타일이라고 합니다. 렌더링 트리에서 각 노드의 위치와 크기를 계산하는데 이를 레이아웃이라고 합니다. 계산된 값을 이용해 각 노드를 화면상의 실제 픽셀로 변환하고 레이어를 만드는데 이를 페인트라고 합니다. 이때 스타일이 복잡할수록 페인트 시간이 늡니다. 레이어를 합성하여 실제 화면에 나타내는데 이를 컴포짓이라고 합니다.

이 정도 정리해봤는데 각각 하나씩 알아보려고 한다. 깊게 알아야 대답도 깊게 들어왔을 때 할 수 있을 것 같아서 말이다.

과정 각각 정리

0. 렌더링

• Server로부터 HTML, CSS, JS등으로 작성한 파일을 받아 브라우져에 보여주는 것을 말한다.

1. 파싱

• 웹 엔진의 HTML/XML 파서가 문서를 파싱해 돔트리, CSSOM 트리를 생성

2. 스타일

• 돔트리 + CSSOM 트리, 렌더링에 필요한 노드만 선택해 페이지를 렌더링하는데 사용

3. 레이아웃

• 렌더트리를 토대로 그려질 노드와 스타일, 크기를 계산하는 과정
• 렌더링 트리에서 위치, 크기를 알 수 없어서 객체들에게 위치, 크기 등을 정해주는 과정

  일종의 계산 과정 같음

4. 페인트

• 렌더트리의 각 노드를 실제 픽셀로 변환하여 그리는 작업을 실행하는 것

5. 컴포짓

• 페인트 단계에서 생성된 레이어를 합성하여 실제 화면에 나타내는 과정으로 이를 통해 화면에 웹페이지를 볼 수 있다.