最近优化项目中的 WebView 加载性能，记录一下优化过程和关键数据，供遇到类似问题的开发者参考。
问题背景
项目中有一个基于 WebView 的会员中心页面，使用 Vue 3 开发。用户反馈每次打开都有明显白屏时间，体验较差。测试发现冷启动加载完成需要 4 秒左右，目标是压缩到 2 秒以内。
分析过程
首先用 Chrome DevTools 远程调试，发现时间主要消耗在三个阶段。
第一阶段是 WebView 初始化。首次创建 WebView 实例时，Android 需要加载浏览器内核，这个过程在低端机上尤其明显。
第二阶段是资源加载。HTML、CSS、JS 文件虽然做了压缩，但总体积仍然有 800KB 左右，4G 网络下加载不稳定。
第三阶段是 Vue 应用挂载。DOM 渲染和组件初始化阻塞了首屏展示。
优化方案
WebView 预初始化。在 Application 的 onCreate 中提前创建 WebView 实例，放入缓存池。这样用户打开页面时直接使用预初始化的实例，省去内核加载时间。注意这里用了 ApplicationContext，避免内存泄漏。
本地资源缓存。把 Vue 打包后的静态资源放到 Android assets 目录，通过 WebViewClient 拦截请求，优先读取本地文件。这样彻底摆脱网络依赖，加载速度从几百毫秒降到几十毫秒。
启用懒加载。Vue 路由组件改用异步加载，首屏只加载必要组件。配合 WebView 的 setLayerType 硬件加速，渲染性能提升明显。
代码压缩。开启 Gzip 和 Brotli 压缩，静态资源总体积从 800KB 降到 200KB 左右。
数据对比
优化前冷启动时间 4.2 秒，优化后降到 1.5 秒。其中 WebView 预初始化节省 1.2 秒，本地缓存节省 0.8 秒，代码压缩和懒加载节省 0.7 秒。
内存占用方面，预初始化会增加 15MB 左右常驻内存，但在可接受范围内。可以通过缓存池大小控制，比如最多保留 2 个空闲实例。
关键代码
WebView 预初始化核心逻辑。在 Application 中提前创建，设置基础配置，包括允许 JavaScript、设置缓存模式、开启 DOM Storage。
资源拦截逻辑。重写 WebViewClient 的 shouldInterceptRequest 方法，判断请求路径是否匹配本地资源，匹配则返回 assets 中的对应文件。
踩坑记录
预初始化必须用 ApplicationContext，用 ActivityContext 会导致内存泄漏，页面关闭后 WebView 无法释放。
本地缓存需要处理版本更新，建议在 URL 中加版本号参数，更新时修改拦截规则。
部分低端机硬件加速有兼容问题，需要动态判断是否开启。
总结
WebView 优化核心思路是减少网络依赖和提前初始化。本地缓存方案虽然会增加 APK 体积，但对用户体验提升明显。如果页面更新频繁，可以结合增量更新策略，只替换变更的资源文件。
这套方案已经在项目中稳定运行两个月，日活用户 5 万左右，崩溃率没有明显上升。
