7. 렌더러 프로세스의 내부 동작

렌더러 프로세스가 HTML 문서를 받았을 때 어떤 절차를 거쳐 화면을 구성할까요.

렌더러 프로세스의 주요 역할은 HTML, CSS, Javascript 를 사용자와 상호작용 할 수 있는 웹 페이지로 변환 하는 것 입니다.

우선, 렌더러 프로세스는 탭 내부에서 발생하는 모든 작업을 담당합니다.
간혹 웹 워커나 서비스 워커를 사용하는 경우에는 워커 스레드가 자바스크립트 코드의 일부를 처리하기도 하지만, 메인 스레드가 브라우저로 전송된 대부분의 코드를 처리합니다.
웹 페이지를 효율적이고 부드럽게 렌더링 하기 위해 별도의 Compositor 스레드와 Raster 스레드가 렌더러프로세스에서 실행 됩니다.

렌더링 엔진의 기본적인 동작 과정

렌더링 엔진의 목표
1. HTML, CSS, Javascript, Image 등 웹 페이지에 포함된 모든 요소들을 화면에 보여줍니다.
2. 스크롤이 생기거나 비동기 요청으로 인한 데이터로딩 등 사용자 동작으로 인해서 입력이 발생하거나 애니메이션 동작이 일어나는 업데이트가 필요할 때 효율적으로 렌더링 할 수 있도록 자료 구조를 생성합니다.

1. DOM Tree 생성 및 CSSOM Tree 생성
렌더링 엔진은 HTML 문서를 파싱하여 DOM Tree를 생성합니다.
또한, 외부 CSS파일과 함께 포함된 스타일 요소도 파싱하여 CSSOM Tree를 생성합니다.

2. Render Tree 생성
이 DOM Tree와 CSSOM Tree 가 합쳐서 화면에 표시되어야 할 모든 노드의 콘텐츠, 스타일 정보를 포함하는 트리인 Render Tree를 생성합니다.

3. Render Tree 배치
렌더 트리 생성이 끝나면 렌더 트리 배치가 시작됩니다. 이 과정은 각 노드가 화면의 정확한 위치에 표시되는 것을 의미합니다.

4. Render Tree 그리기
그 후에는 UI 백엔드에서 렌더 트리의 각 노드를 가로지르며 형상을 만들어내는 렌더 트리 그리기 과정을 지나갑니다.

이 렌더링 엔진은 좀 더 나은 사용자 경험 (UX) 을 위해 가능하면 빠르게 내용을 표시하는데, 모든 HTML 을 파싱할 때 까지 기다리지 않고 배치와 그리기 과정을 시작합니다.

(참고)
display: none 속성과 같이 화면에서 보이지도 않고 공간을 차지하지 않는 것은 렌더트리로 구축되지 않습니다.

파싱?
파싱은 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환 하는 것을 의미합니다.

1. Parse
   파싱 과정을 거쳐 HTML 은 DOM 트리를 구축합니다.
   렌더러 프로세스가 HTML 데이터를 수신하기 시작하면 렌더러 프로세스의 메인 스레드는 HTML 을 파싱해서 DOM 으로 변환하기 시작합니다.
   파싱 중 HTML에 CSS가 포함되어 있다면 CSSOM Tree 작업 또한 함께 진행 됩니다.

2. Layout
   렌더 트리가 생성되었다면 화면에 어떻게 배치해야 할 것인지 노드의 정확한 위치와 크기를 계산합니다.
   즉, ViewPort 내에서 요소들의 정확한 위치와 크기를 계산합니다.
   루트부터 노드를 순회하면서 노드의 정확한 크기와 위치를 계산하고 렌더트리에 반영합니다.

3. Paint
   Layout 단계에서 계산된 값을 이용해 화면에 실제 픽셀로 변환하는 과정 입니다.
   이때 픽셀로 변환된 결과는 여러개의 레이러로 관리 됩니다.

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

UI 가 업데이트 되는 3가지 상황

(1) Layout 이 다시 발생하는 경우

주로 요소의 크기나 위치가 바뀌거나 브라우저 창의 크기가 바뀌었을 때에 다시 발생합니다.

(2) Paint 부터 다시 발생되는 경우

주로 배경 이미지나 텍스트 색상, 그림자 등 레이아웃 수치를 변화시키지 않는 스타일 변경이 일어났을 때 발생합니다.

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

주로 transform 이나 opcity 속성을 사용할 때 발생합니다. 이러한 애니메이션은 메인 스레드 개입 없이 복사된 레이어를 사용하여 렌더링 하기 때문에 빠릅니다.

마치며..

프론트엔드 개발 첫 시작 때 가장 처음으로 먼저 공부했던 파트입니다.
내가 작성한 코드가 브라우저에서 어떻게 작동하는지에 대해서 이해 하는 시간을 가졌으며 어떻게 작성해야 UX가 뛰어날지, 코드 작성에 있어서 어떻게 작성 해야 좀 더 효율적일지 다시 한번 생각해보게 되는 시간이였습니다.

출처

브라우저는 어떻게 동작하는가?
최신 브라우저의 내부 살펴보기
최신 브라우저의 내부 살펴보기 원문