[Flutter] 렌더링 과정

---

일반적인 크로스 플랫폼 프레임워크는 안드로이드, IOS의 UI 라이브러리에 추상 계층을 만듭니다. 이 추상 계층은 UI표현을 위해 안드로이드와 IOS 각각의 시스템 라이브러리와 상호작용을 하는데, 이 때 상당한 오버헤드가 발생합니다.

플러터는 자체 고유의 위젯 세트를 사용하여 이러한 추상화를 최소화하고 있습니다. 또 엔진에 Skia(C/C++로 작성된 그래픽 엔진)의 복사본을 포함하고 있어 디바이스 OS의 버전이 낮아도 앱이 최신 성능을 낼 수 있게 해줍니다. 

---

<렌더링 파이프라인>

플러터 엔진이 시작되면 플러터 엔진은 GPU 하드웨어가 생성하는 VSync 신호를 받고, 위의 파이프라인과 같이 렌더링할 UI 스레드를 구동합니다.

1. UI Thread

: 1~5단계를 수행합니다.

1) Animate : widget state 변경을 위한 Animation Tick.

• Animation Ticker는 매 tick 단위마다 SetState()를 새로 실행해서 위젯의 애니메이션이 1프레임씩 움직이게 합니다. 

2) Build : state 변경을 위해 재설정이 필요한 widget들을 rebuild(아래 이미지의 3가지 tree를 빌드하거나 업데이트). 

3) Layout : Element Tree의 RenderObjectElement에 대해 RenderObject를 구현하는 오브젝트를 만들거나 업데이트 하고, 그 과정에서 RenderObject들의 size, position을 결정합니다.

4) Paint : composited layer들의 display list를 Record. 각각의 node의 paint() 함수가 호출되어 Layer Tree를 생성합니다. 레이어 트리는 drawing instructions 에 저장됩니다. 

5) Submit : 레이어 트리를 GPU Thread에 제출합니다.

 

2. GPU Thread

: 6번째 단계인 Compositing, Raster를 수행합니다. Compositing, Raster는 비동기적으로 수행되며, Compositing 과정에서 Rasterization이 완료됩니다.

6) Compositing : Skia를 통해 GPU에 데이터 프레임을 그립니다. flow module은 Skia-based compositor로, drawing instructions, 프레임 정보를 캐싱합니다. 이렇게 캐싱해둔 데이터를 VSync 신호를 받았을 때 읽어와 데이터를 스크린에 표현합니다.

• Rasterization : drawing instructions을 픽셀 데이터로 변환해주는 것.

---

출처 : https://www.alibabacloud.com/blog/exploration-of-the-flutter-rendering-mechanism-from-architecture-to-source-code_597285

Exploration of the Flutter Rendering Mechanism from Architecture to Source Code