如何避免WebView导致父Composable卡顿？标题文本为何无法即时显示？

1. 布局约束阻塞 #

Column 中 WebView 使用 fillMaxHeight() 时，Compose 需要等待 WebView 完成测量才能确定整个 Column 的布局。而 WebView 初始化及加载过程会占用主线程资源，导致 Title 的绘制被延迟。注释掉 loadUrl 后，WebView 无内容时的测量逻辑异常，反而让 Column 的整体布局无法完成，Title 自然也无法显示。换成 FrameLayout 时，其测量逻辑更简单，不会阻塞父布局的计算。

2. 主线程资源抢占 #

loadUrl 虽为异步请求，但 WebView 的初始化、内核启动、页面解析等初期操作都在主线程执行，会抢占 Compose 重组和绘制的资源，导致 Title 无法即时渲染。

1. 调整布局约束，让 Title 优先渲染 #

给 WebView 设置 weight(1f) 替代 fillMaxHeight()，让它占据 Column 的剩余空间。Title 高度固定（44.dp），Compose 可先完成其测量和绘制，无需等待 WebView：

fun WebTest(modifier: Modifier) {
    val url = "https://www.google.com"
    val ctx = LocalContext.current

    Column(modifier = modifier) {
        Text("title", fontSize = 22.sp, modifier = Modifier.fillMaxWidth().height(44.dp))
        AndroidView(
            modifier = Modifier.fillMaxWidth().weight(1f),
            factory = { WebView(ctx).apply {
                // 提前配置WebSettings减少后续开销
                settings.javaScriptEnabled = true
                settings.loadWithOverviewMode = true
                settings.useWideViewPort = true
            } },
            update = { webView ->
                // 避免重复加载
                if (webView.url != url) {
                    webView.loadUrl(url)
                }
            }
        )
    }
}

2. 用 LaunchedEffect 异步执行加载操作 #

将 loadUrl 放到 LaunchedEffect 中，避免在 AndroidView 的 update 回调（主线程）中执行可能阻塞的操作：

fun WebTest(modifier: Modifier) {
    val url = "https://www.google.com"
    val ctx = LocalContext.current
    val webView = remember { WebView(ctx).apply {
        settings.javaScriptEnabled = true
        settings.loadWithOverviewMode = true
        settings.useWideViewPort = true
    } }

    LaunchedEffect(url) {
        webView.loadUrl(url)
    }

    Column(modifier = modifier) {
        Text("title", fontSize = 22.sp, modifier = Modifier.fillMaxWidth().height(44.dp))
        AndroidView(
            modifier = Modifier.fillMaxWidth().weight(1f),
            factory = { webView }
        )
    }
}

3. 优化 WebView 初始化 #

用 remember 缓存 WebView 实例，避免每次重组重复创建；同时关闭不必要的功能，提升初始化速度：

fun WebTest(modifier: Modifier) {
    val url = "https://www.google.com"
    val ctx = LocalContext.current
    val webView = remember {
        WebView(ctx).apply {
            settings.javaScriptEnabled = true
            settings.loadWithOverviewMode = true
            settings.useWideViewPort = true
            settings.setAppCacheEnabled(false)
            settings.loadsImagesAutomatically = false // 先不加载图片，提升首屏速度
            setLayerType(View.LAYER_TYPE_HARDWARE, null) // 启用硬件加速
        }
    }

    LaunchedEffect(url) {
        webView.loadUrl(url)
    }

    Column(modifier = modifier) {
        Text("title", fontSize = 22.sp, modifier = Modifier.fillMaxWidth().height(44.dp))
        AndroidView(
            modifier = Modifier.fillMaxWidth().weight(1f),
            factory = { webView }
        )
    }
}

内容的提问来源于stack exchange，提问作者Jade