Android Jet Compose JankStats

• 
• Sugoi Ebooks(Write in English)
• Naver Cafe
• Sugoi Japanese
• Find a Job in Japan

• Android Jetpack Compose JankStats

Android Jetpack Compose JankStats

Android Jetpack Compose 를 사용하다 보면 UI가 화면 싱크타임에 걸쳐지게 되어 제대로 그려내지 못하는 경우가 있습니다. 이를 Jank라고 하는데 JankStats 라이브러리를 이용하면 Compose에서 이러한 JankStats를 개발로그에 출력하고 결과보고서를 작성해 줌으로서 개발자가 UI를 좀더 개선할수있도록 도와줍니다.

Jank 는 일반적으로 애플리케이션 성능 저하를 의미하며, 이로 인해 프레임 손실, UI 애니메이션 중단, 사용자 경험 저하 등 이 발생할 수 있습니다.

새로운 JankStats 라이브러리는 개발자가 삭제된 렌더 프레임에 대한 보고서(“버벅거림”)를 포함하여 앱 UI의 성능 문제를 추적하고 분석하는 데 도움이 됩니다.

JankStats는 기존 Android 플랫폼 API(FrameMetrics)를 기반으로 구축되었지만 API 레벨 16과 호환됩니다.

사용법은 https://developer.android.com/topic/performance/jankstats
에 있습니다.

Build에 아래와 같이 추가합니다.

dependencies {  implementation "androidx.metrics:metrics-performance:1.0.0-alpha03"  }

subprojects { 
	tasks.withType(org.jetbrains.kotlin.gradle.tasks.KotlinCompile).configureEach { 
	kotlinOptions {if (project.findProperty("myapp.enableComposeCompilerReports") == "true") { 
		freeCompilerArgs += ["-P","plugin:androidx.compose.compiler.plugins.kotlin:reportsDestination=" + project.buildDir.absolutePath + "/compose_metrics"] 
		freeCompilerArgs += ["-P","plugin:androidx.compose.compiler.plugins.kotlin:metricsDestination=" + project.buildDir.absolutePath + "/compose_metrics"]}
		}
	} 
}

그리고 그래이들 빌드를 아래처럼 수행합니다.

 ./gradlew assembleRelease -Pmyapp.enableComposeCompilerReports=true --rerun-tasks

빌드를 하게되면 build 하위에 compose_metric 이라는 폴더가 생가고 xxx_release-classes.txt, xxx_release-composables.csv,xxx_release-composables.txt,xxx_release-module.json,이 생성되고 각 콤포져블 함수에 대새 Restatable과 Skippable 이라는 태그가 붙게됩니다.
Skippable을 늘림으로서 불필요하게 화면 갱신이 되지않도록(도넛홀효과) 하는게 UI개선의 핵심입니다.

{ 
"skippableComposables": 64, 
"restartableComposables": 76, 
"readonlyComposables": 0, "totalComposables": 76 
}

Activity 에서는 다음과 같이 사용할수가 있습니다.

val jankFrameListener = JankStats.OnFrameListener { frameData -> 
Log.v("JankStatsSample", frameData.toString()) 
}
jankStats = JankStats.createAndTrack(window, listener)  jankStats.isTrackingEnabled = true


// 특정 화면에서의 Jank인지 구분하기 위해서는 PerformanceMetricsState.Holder 를 이용합니다.

@Composable 
fun rememberMetricsStateHolder(): PerformanceMetricsState.Holder {
  val viwe = LocalView.current
  return remember(view) {
    PerformaceMetricsState.getHolderForhierarchy(view)
  }
}

// 화면의 Composable에서 사용할때는 키를 지정해서 구분합니다. 
@Composable
fun JankyScreen() {
  val holder = rememberMetricsStateHolder()
  val key = "screenName"
  LaunchedEffect(holder) {
    holder.state?.putState(key, "JankScreen")
  }
  JankRaiseColumn()
}

Profiler 에서 보기위해서는 아래와 같이 합니다.
https://android-developers-jp.googleblog.com/2022/07/spot-your-ui-jank-using-cpu-profiler-in-android-studio.html