WebView的优化

来自公众号
在Android应用开发中，WebView是一个常用的组件，用于在应用中展示网页内容。然而，WebView的启动速度和性能可能会影响用户体验，特别是在一些性能较低的设备上，性能提升，能提升应用的响应速度和用户体验。

在优化启动过程，主要有以下几个方面：

1. 加载优化：合理选择预加载和延迟加载，有效的减少启动时间；
2. 请求优化：通过并行，拦截请求策略，可以加快网络耗时和减少重复耗时；
3. 缓存优化：合理的使用缓存，减少网络请求，提升加载速度；
4. 渲染优化：合理的启动硬件加速，可以有效提升渲染速度；
5. 进程优化：启动多进程模式，可以避免主线程组上，内存泄露 异常crash等问题

ps ：单进程webviewActivity，全局webView等等

加载优化

预加载

可以启动的时候提前初始化WebView并开始预加载，减少webview首次加载页面时间，可以在启动的时候吧webview加入到IdelHanler中，等主线程空的时候进行加载

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

延迟加载

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

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

请求优化

并行请求

在加载H5页面，通常先加载模版文件，然后再获取动态数据填充进去，提升速度可以h5去加载模版，请求接口到原生并行，然后js传递给H5填充减少总耗时；

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

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

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

拦截请求

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

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的加载速度和性能。

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的缓存模式来优化加载速度，如使用缓存或者忽略缓存。示例代码如下：

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

共享缓存：

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

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

渲染优化

启动硬件加速

启动硬件加速会提高WebView的渲染速度，但是低端设备上可能会造成性能问题，根据情况来选择

<application android:hardwareAccelerated="true" ...>
    ...
</application>

进程优化

启动多进程

webview的加载和渲染可能会阻塞应用的主线程，影响用户体验，为了提升性能和稳定性，可以考虑将Webview放到单独进程，避免cursh影响到主进程

<activity android:name=".WebViewActivity"
          android:process=":webview_process">
    ...
</activity>

其他

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