[Flutter] 플러터 앱 성능 측정 및 평가, 성능을 개선하는 방법 with Android Studio

개요 

안드로이드 스튜디오에서 플러터 어플리케이션 성능을 측정하고 평가, 성능을 개선하는 방법을 서술합니다. 안드로이드 스튜디오는 LadyBug 2024.02 버전을 기준으로 서술합니다. 

저는 실 기기에서 프로파일 모드 실행했습니다. 참고하세요. 

 

프로파일 모드로 앱 실행  

안드로이드 스튜디오 > Run > Flutter Run 'main.dart' in Profile Mode 를 선택합니다. 

 

또는 터미널에서 아래 명령어로도 실행 가능합니다. 

flutter run --profile

 

DevTool 열기  

프로파일 모드로 실행하면 안드로이드 스튜디오 우측에 Performance 탭이 활성화 되면서 아래와 같은 화면이 나타납니다. 하단 Open Devtool 을 클릭하여 좀 더 자세히 보겠습니다. 

 

DevTool 을 열면 Performance 탭에서 자세한 사항들을 확인할 수 있는데요, 자세히 알아보겠습니다. 

 

해석하기 

DevTool에서 보여지는 대표적인 두 쓰레드를 설명하겠습니다. 이외에 Platform Thread, I/O Thread 가 있지만 이에 대한 설명은 생략하겠습니다. 

UI Thread 

실제 작성한 Dart 코드를 Dart VM을 통해 실행합니다. 위젯의 정보 및 상호 계층을 구성하는 Layer Tree 를 생성한 후 Raster Thread에게 넘겨주는 역할을 담당합니다. 

• Jank : 레이어 트리를 구성함에 있어 지나치게 많은 시간이 소요될 수 있습니다. 이때 jank가 발생한다고 표현합니다. 

 

Raster Thread 

UI Thread 에서 넘겨받은 Layer Tree 데이터를 통해 GPU에게 이를 어떻게 그리면 되는 지 번역합니다. 

• Shader Compilation Jank : Raster Thread 는 전달 받은 Layer Tree 를 GPU가 이해하는 코드 모음인 Shader를 생성하고 컴파일 하는 작업을 담당합니다. 그러나 쉐이더 생성 및 컴파일 작업은 한 워크로드에서 순차적으로 진행됩니다. Shader Compilation Jank는 쉐이더 생성과 컴파일 작업이 길어지는 경우 프레임이 끊기는 현상입니다.
• 위 문제를 개선하기 위해 플러터 팀에선 Impeller 라 불리는 새로운 렌더링 엔진을 (안드로이드 기기 적용 기준) 3.22 버전부터 기본 엔진으로 채택하고 있습니다.

 

UI Thread에서 담당한 작업 시간은 한 프레임 안에서 좌측, Raster Thread에서 담당한 작업 시간은 우측에 표현됩니다. 위 그림에서는 UI Thread와 Raster Thread 에서 작업한 시간 모두 매우 긴 것으로 보입니다. 빨간색(Jank 및 Shader Compilation) 으로 표기되네요. 

더 자세한 분석을 위해 표기 옵션을 모두 체크하는 것이 좋습니다. 

 

조치 방법 

원론적인 이야기지만, 성능을 개선하기에 도움이 되는 조치 방법들입니다.

saveLayer 사용 지양 

안내
saveLayer 사용 여부는 checkerboardOffscreenLayers 를 체크해야 확인이 가능합니다. 

플러터는 다양한 시각적 효과를 구현하기 위해 saveLayer 를 호출합니다. 지나치게 많은 호출은 비용을 많이 사용합니다. saveLayer를 호출하는 위젯 및 상세 내용 글을 참고하세요. 

 

이미지 사용에 대한 고려 

이미지 등의 파일을 화면에 그리는 작업은 매우 많은 비용을 소모합니다. 아래 스크린샷을 보시면 I/O 작업으로 UploadRasterImage 작업이 수행되기 위해 꽤 많은 시간이 필요하니다. 

이를 개선하기 위해 사전에 캐싱된 이미지를 쓰는 것이 개선 방법이 될 수 있습니다. 그러나 모든 이미지를 다 캐싱하는 것도 문제가 될 수 있으니.. 어려운 문제입니다. 

 

참고 자료 

Flutter performance profiling

Shader compilation jank

iOS에서 Flutter 앱이 버벅거리는 이슈(Jank)

• https://files.flutter-io.cn/flutter-design-docs/Jank_in_Flutter.pdf

Raster thread performance optimization tips

Use the Performance view