Jetpack Compose GPU Overdraw 성능 개선

강현석·2024년 9월 22일
0

article

목록 보기
10/10
post-custom-banner

본 내용은 학습을 위해 Android Jetpack Compose and GPU Overdraw: Painting a Performance Masterpiece ! 을 보고 입맛대로 정리한 글입니다.


GPU Overdraw

  • 다른 픽셀이 가려진 픽셀을 GPU가 렌더링할 때 발생하는 현상
  • 그려진 픽셀이 사용자에게 표시되는 최종 프레임에서 보이지 않음

문제점

  • (성능 저하) GPU에 부담을 주어 프레임 속도가 떨어지고 앱이 느려짐
  • (전력 소비 증가) 불필요한 랜더링으로 더 많은 전력이 소모되여 베터리 수명이 감소하고 발열이 생김

식별 방법

  • 개발자 옵션 > "Debug GPU overdraw" > "Show overdraw areas" 활성화
  • 3X Overdraw 이상은 최적화가 필요함

개선 방법

Composable 계층구조 최적화

Don'tDo
불필요한 계층(Column)을 제거하여 계층구조 최적화

Box 활용

Don'tDo
Box를 사용하여 Composable 계층구조 단순화

불필요한 Background 제거

부모(Column)에 배경색을 설정하였지만, 실제로 자식(Row)에 적용된 배경색이 보임

Lazy Layout 사용

Don'tDo
모든 ProductCard가 한번에 랜더링화면에 표시되는 ProductCard만 랜더링

Clip

  • clip을 먼저 사용하면 영역이 제한되어 불필요한 랜더링 방지

Stateless Composable 선호

Don'tDo
isFavourite 값은 recomposition시 변경될 수 있음recomposition이 빠르고 overdraw가 발생할 가능성이 적음

derivedStateOf 사용

특정 상태가 변경될 때에만 recomposition
profile
볼링을 좋아하는 안드로이드 개발자
post-custom-banner

0개의 댓글