Jetpack Compose version: 1.3.1

Description

Hello, every one,

1. The company I work for is using Compose. When measuring performance data, we found that the startup time of compose has some gaps compared with the way of View

2. After read the compose's code, we found the way to reduce the startup time, we called PreCompose. it reduce startup frame time 25%(91ms->78m)

3. Hope to discuss this solution with the official and integrate it into the mainline

PreCompose

issue

In the timeline, it is found that the most time-consuming parts are compose and applychange. it takes up most of the time

Timeline trace.jpg

Solution

We found that ComposeInit can pre-execute

Suppose there are two pages now, one is the homePage, and the other is the composPage. when click button on homePage, then nav to composePage

1. we can call AndroidView.preCompose() in homePage, pre-execute ComposeInit
2. if enter compose page, call AndroidView.applyChange

Precompose architecture.png

in this way, we could reduce startup frame time 25%(91ms->78m)

List async PreCompose trace.png

for detail, you can see commit at

usage demo

@Composable
fun listContent() {
   LazyColumn() {
      itemsIndexed() {
        //...
      }
   }
}

class HomePage {
  fun onCreateView(){
     PreComposer.preComposeForView("test",listContent)
  }
}

class ComposePage {
  fun onCreateView(){
    val composeView = PreComposer.getAndRemovePreComposeView("test")
    if(composeView) {
      setContent(composeView)
    }
  }
}

class PreComposer {
  suspend fun preComposeForView(key, composeContent){
     val v = AbstractPreComposeView(appContext)
     v.content = composeContent
     v.initPreComposeOnUiThread()
     val job = composeCoroutineScope.launch(Dispatchers.Default) {
       //called composeInit(@Compose content) coroutine
       v.callComposeContent()
     }
     job.join()     
     map[key] = v
  }
  
  fun getAndRemovePreComposeView(key: String) = map.remove(key)
}

AbstractPreComposeView.kt

fun initPreComposeOnUiThread() {
   ViewTreeLifecycleOwner.set(this, delegateLifecycleOwner)
   ensureCompositionCreated()
   //...
}

fun callComposeContent() {
   //called WrappedComposition `original.setContent` method
   composeEventObserver.onStateChanged(delegateLifecycleOwner,Lifecycle.Event.ON_CREATE)
}

when composeView attach to window composition?.applyComposeChange() called