브라우저 렌더링 파이프라인

결국 프론트엔드 코드는 웹브라우저 위에서 동작한다.

웹 프로트엔드 개발자로서 브라우저의 동작을 이해한다면?

 

개발 시 더 나은 선택, 코드를 작성 할 수 있지 않을까?

먼저 chromium에 대해 알아보자

 

chromium

chromium은 구글에서 만든 오픈소스 프로젝트로

대부분의 브라우저는 chromium을 기반으로 동작한다.

 

 

 

chromium의 멀티프로세스 아키텍처

 

원래 일반적으로 프로그램을 하나 키면 프로세스가 1개 실행 되어야한다.

그러나 실제로 크롬을 실행시키면 아래와 같이 여러개의 프로세스가 실행되는 것을 확인할 수 있다.

 

 

 

위 그림에서 보면 렌더러 프로세스가 여러개인 것을 확인할 수 있는데,

렌더러 프로세스는 탭별로 하나씩 생성된다.

 

 

 

Blink 엔진이란?

 

GPU 프로세스는 어떻게 GPU가 작업을 처리할 것인가에 대한 명령어를 받아서 실행이된다.

바로 그 명령어들을 생성하는 엔진이라고 볼 수 있다.

 

 

렌더링 파이프라인이란?

 

렌더링 프로세스

 

 

 

1. parse

C++ 기반으로 만들어진 Blink 엔진에서 html 파일을 받게 되면

텍스트 기반의 html 정보를 C++ 객체로 바꾸어서 트리화하는 과정

흔히 트리화 된 html을 DOM tree라고 한다.

 

 

 

흔히 script 태그는 body의 최하단에 선언하는 것을 추천하는데 이는

html 파싱중 script 태그를 만나면 parsing을 중단하고, javscript 코드를 v8 엔진으로 넘겨서

자바스크립트 코드를 실행시키기 때문이다.

 

 

 

 

2. style

 

1. 시트를 하나로 묶기

 

 

2. computedStyle 생성

 

 

3. NodeRenderingData

 

 

 

 

3. layout

 

 

 

 

4. pre-paint

 

어떤 좌표에 어떤 어떤 크기로 데이터들이 그려질지에 대한 정보까지 처리가 되었다.

그러나 아직 layout 과정에서 처리되지 않는 CSS가 남아있다.

 

위의  스타일 속성들은 GPU 프로세스에서 처리해야하는 속성들이다.

따로 tree 형태로 만들어서 넘겨주어야한다.

 

5. paint

 

layout 오브젝트에 paint라는 메소드로 drawRect, draoOval 같은 명령어를 생성하게된다.

그리고 이 명령어들을 DisplayItemList에 하나씩 넣는다.

 

Wrapping된 SKIA 명령어 => GPU 프로세스에서 사용하게 될 명령어

 

z-index는 paint 과정에서 처리하게된다.

 

 

SKIA란?

Skia는 Google에서 개발한 2D 그래픽 라이브러리로, 여러 플랫폼에서 그래픽 렌더링을 지원하는 데 사용됩니다. Skia는 웹 브라우저, 안드로이드 운영체제, 그래픽 애플리케이션 등 다양한 환경에서 활용됩니다.

브라우저의 렌더링 과정에서 "skia"라는 용어는 보통 Chromium 기반 브라우저에서 사용되는 Skia 그래픽 엔진을 가리킵니다. 이 엔진은 웹 페이지의 그래픽 요소를 처리하고 화면에 표시하는 역할을 합니다.

브라우저에서 Skia는 웹 페이지의 그림, 텍스트, 도형 등을 그릴 때 사용되며, GPU 가속을 통해 빠르고 부드러운 그래픽 렌더링을 제공합니다. Skia는 여러 플랫폼에서 이식성이 뛰어나며, Chromium 기반의 브라우저에서는 Blink 렌더링 엔진과 함께 사용되어 웹 콘텐츠를 효과적으로 표시합니다.

 

 

 

 

6. Layerize

 

 

 

 

 

 

 

 

 

 

 

7. commit

 

layerize 과정이 끝난 객체들을 comsite thread로 옮기는 과정

 

 

멀티 스레드로 나뉘는 이유?

 

 

8. Tiling

 

 

네이버 메인화면

 

파란색 레이어 부분은 실제로 스크롤을 내렸을 때 그려지는 것으로 확인할 수 있다.

그리고 반대로 스크롤을 내렸을때 첫 화면에서 보이던 검색창 레이어가 보이지 않는 것을 확인할 수 있다.

 

 

9. Raster

 

- 프로퍼티트리들의 결과물들을 최종적으로 종합해서 실행

- SKIA가 비트맵을 생성 & GPU 메모리에 저장

 

 

 

10. Activate

 

 

Compositor Frame

 

Compositor Frame은 그래픽 엔진이 화면을 그릴 때의 하나의 프레임을 나타냅니다.
이것은 렌더링되는 컨텐츠를 포함하고, 해당 프레임이 화면에 어떻게 나타날지에 대한 정보를 담고 있습니다.



DrawQuad

 

DrawQuad는 렌더링할 객체 또는 텍스처를 나타내는데 사용되는 개념입니다. 일반적으로 2D 또는 3D 객체를 표현하며, 이들이 Compositor Frame에 어떻게 배치되고 표시될지를 정의합니다.

 

11. Aggregate

 

브라우저 프로세스에서 전체적인 UI를 관리한다.

뒤로가기, 스크롤, 북마크탭 등의 대한 화면을 그릴 수 있는 정보가 필요하다.

 

따라서 브라우저 프로세스에서도 Compositor Frame을 만들 수 있다.

 

iframe도 따로 렌더러 프로세스가 필요하다.(site isolation)

 

12. Display

 

이제 최종적으로 Compositor Frame 들의 DrawQuad 명령어를 실행하게 된다.

이제 SKIA, OpenGL을 거져 GPU가 화면을 찍어내게 된다.

 

OpenGL 이란?

OpenGL은 3D 그래픽을 렌더링하기 위한 공개 표준 그래픽 라이브러리입니다. 브라우저에서는 WebGL이라는 OpenGL의 웹 버전이 사용될 수 있습니다. GPU가 있는 경우, SKIA나 WebGL을 통해 그래픽 요소를 GPU에게 전달하여 하드웨어 가속을 활용하여 렌더링 성능을 향상시킬 수 있습니다.

 

Reference

https://www.youtube.com/watch?v=idgsruQl9f4