为什么 Android Jetpack Compose 制作的 UI 加载这么慢？

Question

我使用 Android Jetpack Compose 制作的代码 A 创建了一个应用程序，它在显示主 UI 之前很长时间显示空白 UI，您可以看到图像 A

我学习了一些示例项目，例如官方示例项目Crane。

所以我将代码A修改为基于代码B的Crane，我希望代码B在显示主UI之前快速显示加载UI，但我仍然发现它在使用代码B显示主UI之前很长时间显示空白UI。

顺便说一句，我发现示例项目Crane在显示主 UI 之前很长时间也显示空白 UI，您可以看到图像 B。

A：如何在主UI显示之前快速显示Loding UI？

B：我无法完全理解代码B，为什么Loding UI会自动关闭？是因为API函数的原因吗MutableTransitionState？

C：在代码B中，即使我设置了val SplashWaitTime: Long = 10000000，我发现Loding UI大约2秒后就消失了，就像我设置的那样val SplashWaitTime: Long = 2000，为什么？

代码A

@AndroidEntryPoint
class ActivityMain : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            SoundMeterTheme {
                Surface(color = MaterialTheme.colors.background) {                   
                    NavGraph()
                }
            }
        }
    }
}

图片A

代码B

@AndroidEntryPoint
class ActivityMain : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            SoundMeterTheme {
                Surface(color = MaterialTheme.colors.background) {
                    val transitionState = remember { MutableTransitionState(SplashState.Shown) }
                    LandingScreen(
                        onTimeout = { transitionState.targetState = SplashState.Completed }
                    )
                    NavGraph()
                }
            }
        }
    }    
}


private const val SplashWaitTime: Long = 2000
enum class SplashState { Shown, Completed }

@Composable
fun LandingScreen(modifier: Modifier = Modifier, onTimeout: () -> Unit) {
    Box(modifier = modifier.fillMaxSize(), contentAlignment = Alignment.Center) {       
        val currentOnTimeout by rememberUpdatedState(onTimeout)

        LaunchedEffect(Unit) {
            delay(SplashWaitTime)
            currentOnTimeout()
        }
       Text("Loading..")
    }
}

图B

Answer 1

您应该在启用 R8 的发布构建模式下测试性能

   release {

       minifyEnabled true

   }

您可以在此处或此处有关性能的官方文档中阅读更多相关信息，Compose 的首次加载可能会很慢，建议使用基线配置文件

使用基线配置文件

Compose 作为库分发，而不是 Android 平台的一部分。这种方法让我们能够频繁更新 Compose 并支持较旧的 Android 版本。然而，将 Compose 作为库分发会产生成本。Android 平台代码已编译并安装在设备上。另一方面，库需要在应用程序启动时加载，并在需要功能时及时解释。这可能会在启动时以及首次使用库功能时减慢应用程序的速度。

您可以通过定义基线配置文件来提高性能。这些配置文件定义了关键用户旅程所需的类和方法，并与应用程序的 APK 一起分发。在应用程序安装过程中，ART 会提前编译关键代码，以便在应用程序启动时可供使用。

定义一个好的基线配置文件并不总是那么容易，因此 Compose 默认附带一个。您可能不需要做任何工作就能看到这个好处。但是，如果您选择定义自己的配置文件，则生成的配置文件可能实际上并不能提高应用程序的性能。您应该测试该配置文件以验证它是否有帮助。一个好方法是为您的应用程序编写 Macrobenchmark 测试，并在编写和修改基线配置文件时检查测试结果。有关如何为 Compose UI 编写 Macrobenchmark 测试的示例，请参阅 Macrobenchmark Compose 示例。