满满的WebView优化详解，让你的H5实现秒开体验。

最新推荐文章于 2024-08-12 01:35:25 发布

让开，我要吃人了

最新推荐文章于 2024-08-12 01:35:25 发布

阅读量2.2k

点赞数 1

分类专栏： Android进阶之路文章标签： webview android javascript 移动开发安卓

本文链接：https://blog.csdn.net/weixin_55362248/article/details/122221410

版权

本文深入探讨了WebView与原生应用的性能差距，重点介绍了预创建和复用WebView、渲染优化（包括JS、CSS和图片）以及模板优化等关键策略。通过预加载、缓存策略和CDN加速等手段，显著提升了H5页面的加载速度和用户体验。

摘要由CSDN通过智能技术生成

WebView与原生对比差在哪里？

这里引用百度APP图片来说明。

百度的开发人员将这一整个过程划分为了四个阶段，并统计出了各个阶段的平均耗时。

可以看到，在初始化组件阶段就花费了 260 ms，首次创建耗时均值为 500 ms，毫无疑问这是我们要优化的第一点。而最耗时的当属正文加载&渲染和图片加载两个阶段。为什么会这么耗时呢，因为这两个阶段需要进行多次网络请求、JS 调用、IO读写。所以这里也是我们需要优化的地方。

可以得出优化方向：

WebView预创建和复用
渲染优化（JS、CSS、图片）
模板优化（拆分、预热、复用）

WebView预创建和复用

WebView 的创建是比较耗时的，首次创建耗时几百毫秒，因此预创建和复用尤为重要。
大致逻辑是先创建WebView并缓存起来，等到需要的时候直接取出来，代码如下：

class WebViewManager private constructor() {

    // 为了阅读体验，省略部分代码

    private val webViewCache: MutableList<WebView> = ArrayList(1)

    private fun create(context: Context): WebView {
        val webView = WebView(context)
    // ......
        return webView
    }

    fun prepare(context: Context) {
        if (webViewCache.isEmpty()) {
            Looper.myQueue().addIdleHandler {
                webViewCache.add(create(MutableContextWrapper(context)))
                false
            }
        }
    }

    fun obtain(context: Context): WebView {
        if (webViewCache.isEmpty()) {
            webViewCache.add(create(MutableContextWrapper(context)))
        }
        val webView = webViewCache.removeFirst()
        val contextWrapper = webView.context as MutableContextWrapper
        contextWrapper.baseContext = context
        webView.clearHistory()
        webView.resumeTimers()
        return webView
    }

    fun recycle(webView: WebView) {
        try {
            webView.stopLoading()
            webView.loadDataWithBaseURL(null, "", "text/html", "utf-8", null)
            webView.clearHistory()
            webView.pauseTimers()
            webView.webChromeClient = null
            webView.webViewClient = null
            v