如何秒开WebView?Android性能优化全攻略!

在Android应用开发中,WebView是一个常用的组件,用于在应用中展示网页内容。然而,WebView的启动速度和性能可能会影响用户体验,特别是在一些性能较低的设备上。本文将介绍一些优化WebView启动的技巧,以提高应用的响应速度和用户体验。

在优化WebView启动的过程中,主要有以下几个方面:

  1. 加载优化:通过预加载,延迟加载,可以有效减少启动的时间。
  2. 请求优化:通过并行、拦截请求策略,可以加快网络耗时,与减少重复的耗时。
  3. 缓存优化:合理使用缓存,减少网络请求,提高加载速度。
  4. 渲染优化:合理的启动硬件加速,可以有效的提高渲染速度。
  5. 进程优化:启用多进程模式,可以避免主线程阻塞,内存泄漏、异常crash等问题。

下面我们将详细说明这些优化技巧。

加载优化

预加载技巧

在应用启动时提前初始化WebView并进行预加载,可以减少WebView首次加载页面的时间。可以在应用的启动过程中将WebView加入到IdelHandler中,等到主线程空闲的时候进行加载。

kotlin 复制代码
fun execute() {
    // 在主线程空闲的时候初始化WebView
    queue.addIdleHandler {
        MyWebView(MutableContextWrapper(applicationContext)).apply {
            // 设置WebView的相关配置
            settings.javaScriptEnabled = true
            // 进行预加载
            loadUrl("about:blank")
        }
        false
    }
}

延迟加载

延迟加载是指将一些非首屏必需的操作推迟到首屏显示后再执行。通过延迟加载,可以减少首屏加载时间,提升用户体验。例如,可以在首屏加载完成后再发起一些后台网络请求、埋点,或者在用户首次交互后再执行一些JavaScript操作。

scss 复制代码
// 延迟2秒执行上报埋点
Handler().postDelayed({
    // 上报启动统计
    reportStart()
}, 2000)

请求优化

并行请求

在加载H5页面时,通常会先加载模板文件,然后再获取动态数据填充到模板中。为了提升加载速度,可以在H5加载模板文件的同时,由Native端发起请求获取正文数据。一旦数据获取成功,Native端通过JavaScript将数据传递给H5页面,H5页面再将数据填充到模板中,从而实现并行请求,减少总耗时。

java 复制代码
// 在加载模板文件时,同时发起正文数据请求
webView.loadUrl("file:///android_asset/template.html")

// 获取正文数据
val contentData = fetchDataFromServer()

// 将数据传递给H5页面
webView.evaluateJavascript("javascript:handleContentData('" + contentData + "')", null)

拦截请求

可以通过自定义WebViewClient来拦截WebView的请求。重写shouldInterceptRequest方法,可以拦截所有WebView的请求,然后进行相应的处理。

kotlin 复制代码
override fun shouldInterceptRequest(view: WebView, request: WebResourceRequest): WebResourceResponse? {
    // 在此处实现请求拦截的逻辑
    if (needIntercept(request)) {
        // 拦截请求,返回自定义的WebResourceResponse或者null
        return interceptRequest(request)
    } else {
        // 继续原始请求
        return super.shouldInterceptRequest(view, request)
    }
}

缓存优化

WebView缓存池

WebView缓存池是一组预先创建的WebView实例,存储在内存中,并在需要加载网页时从缓存池中获取可用的WebView实例,而不是每次都创建新的WebView。这样可以减少初始化WebView的时间和资源消耗,提高WebView的加载速度和性能。

kotlin 复制代码
private const val MAX_WEBVIEW_POOL_SIZE = 5
private val webViewPool = LinkedList<WebView>()

fun getWebView(): WebView {
    synchronized(webViewPool) {
        if (webViewPool.isEmpty()) {
            return MyWebView(MutableContextWrapper(MyApp.applicationContext()))
        } else {
            return webViewPool.removeFirst()
        }
    }
}

fun recycleWebView(webView: WebView) {
    synchronized(webViewPool) {
        if (webViewPool.size < MAX_WEBVIEW_POOL_SIZE) {
            webViewPool.addLast(webView)
        } else {
            webView.destroy()
        }
    }
}

缓存策略

WebView提供了缓存机制,可以减少重复加载相同页面的时间。可以通过设置WebView的缓存模式来优化加载速度,如使用缓存或者忽略缓存。示例代码如下:

kotlin 复制代码
// 在WebView的初始化代码中启用缓存
webView.settings.cacheMode = WebSettings.LOAD_CACHE_ELSE_NETWORK

共享缓存

对于一些频繁访问的数据,如公共的CSS、JavaScript文件等,可以将其缓存到应用的本地存储中,然后在多个 WebView 实例之间共享。

csharp 复制代码
// 从本地存储中加载公共资源并设置给 WebView
webView.loadDataWithBaseURL("file:///android_asset/", htmlData, "text/html", "UTF-8", null)

渲染优化

启用硬件加速

启用硬件加速可以提高WebView的渲染速度,但是在一些低端设备上可能会造成性能问题,因此需要根据实际情况进行选择。

ini 复制代码
<application android:hardwareAccelerated="true" ...>
    ...
</application>

进程优化

启用多进程

WebView的加载和渲染可能会阻塞应用的主线程,影响用户体验。为了提升应用的性能和稳定性,可以考虑将WebView放置在单独的进程中运行,以减轻对主进程的影响。

ini 复制代码
<activity android:name=".WebViewActivity"
          android:process=":webview_process">
    ...
</activity>

其它

  1. DNS优化:也就是域名解析,相同的域名解析成ip系统会进行缓存,保证端上api地址与webview的地址的域名一致,可以减少域名解析的耗时操作。
  2. 静态页面直出:由于在渲染之前有个组装html的过程,为了缩短耗时,让后端对正文数据和前端的代码进行整合,直接给出HTML文件,让其包含了所需的内容和样式,无需进行二次加工,内核可以直接渲染。
  3. http缓存:针对网络请求,增加缓存,例如,添加Cache-Control、Expires、Etag、Last-Modified等信息,定义缓存策略。

结语

以上介绍了一些 Android WebView 启动优化技巧。通过这些优化措施,可以有效提升 WebView 的启动速度,改善用户体验。

推荐

android_startup: 提供一种在应用启动时能够更加简单、高效的方式来初始化组件,优化启动速度。不仅支持Jetpack App Startup的全部功能,还提供额外的同步与异步等待、线程控制与多进程支持等功能。

AwesomeGithub: 基于Github的客户端,纯练习项目,支持组件化开发,支持账户密码与认证登陆。使用Kotlin语言进行开发,项目架构是基于JetPack&DataBinding的MVVM;项目中使用了Arouter、Retrofit、Coroutine、Glide、Dagger与Hilt等流行开源技术。

flutter_github: 基于Flutter的跨平台版本Github客户端,与AwesomeGithub相对应。

android-api-analysis: 结合详细的Demo来全面解析Android相关的知识点, 帮助读者能够更快的掌握与理解所阐述的要点。

daily_algorithm: 每日一算法,由浅入深,欢迎加入一起共勉。

相关推荐
小白学习日记43 分钟前
【复习】HTML常用标签<table>
前端·html
小比卡丘1 小时前
C语言进阶版第17课—自定义类型:联合和枚举
android·java·c语言
丁总学Java1 小时前
微信小程序-npm支持-如何使用npm包
前端·微信小程序·npm·node.js
yanlele1 小时前
前瞻 - 盘点 ES2025 已经定稿的语法规范
前端·javascript·代码规范
懒羊羊大王呀2 小时前
CSS——属性值计算
前端·css
DOKE2 小时前
VSCode终端:提升命令行使用体验
前端
xgq2 小时前
使用File System Access API 直接读写本地文件
前端·javascript·面试
前行的小黑炭2 小时前
一篇搞定Android 实现扫码支付:如何对接海外的第三方支付;项目中的真实经验分享;如何高效对接,高效开发
android
用户3157476081352 小时前
前端之路-了解原型和原型链
前端
永远不打烊2 小时前
librtmp 原生API做直播推流
前端