WebviewPool 打造属于自己的WebView池 ,优化WebView的使用

最近把Webview优化速度,好好看了看,发现在webview启动的时候特别耗时

性能

对于WebView的性能,给人最直观的莫过于:打开速度比native慢。

是的,当我们打开一个WebView页面,页面往往会慢吞吞的loading很久,若干秒后才出现你所需要看到的页面。

这是为什么呢?

对于一个普通用户来讲,打开一个WebView通常会经历以下几个阶段:

交互无反馈

到达新的页面,页面白屏

页面基本框架出现,但是没有数据;页面处于loading状态

出现所需的数据

如果从程序上观察,WebView启动过程大概分为以下几个阶段:

1.png

如何缩短这些过程的时间,就成了优化WebView性能的关键。

接下来我们逐一分析各个阶段的耗时情况,以及需要注意的优化点。

WebView初始化

当App首次打开时,默认是并不初始化浏览器内核的;只有当创建WebView实例的时候,才会创建WebView的基础框架。

所以与浏览器不同,App中打开WebView的第一步并不是建立连接,而是启动浏览器内核

我们来分析一下这段耗时到底需要多久。

分析

针对WebView的初始化时间,我们可以定义两个指标:

首次初始化时间:客户端冷启动后,第一次打开WebView,从开始创建WebView到开始建立网络连接之间的时间。

二次初始化时间:在打开过WebView后,退出WebView,再重新打开WebView,从开始创建WebView到开始建立网络连接之间的时间。

测试数据:

测试系统1: iOS模拟器,Titans 10.0.7

测试系统2: OPPO R829T Android 4.2.2

测试方式:测试10次取平均值

测试App:美团外卖

单位:ms

首次初始化时间二次初始化时间

iOS(UIWebView)306.5676.43

iOS(WKWebView)763.26457.25

Android192.79 *142.53

*Android外卖客户端启动后会在后台开启WebView进程,故并不是完全新建WebView时间。

这意味着什么呢?

作为前端工程师,统计了无数次的页面打开时间,都是以网络连接开始作为起点的。

很遗憾的通知您:WebView中用户体验到的打开时间需要再增加70~700ms。

于是我们找到了“为什么WebView总是很慢”的原因之一:

在浏览器中,我们输入地址时(甚至在之前),浏览器就可以开始加载页面。

而在客户端中,客户端需要先花费时间初始化WebView完成后,才开始加载。

而这段时间,由于WebView还不存在,所有后续的过程是完全阻塞的。可以这样形容WebView初始化过程:


2.png

那么有哪些解决办法呢?

怎么优化

由于这段过程发生在native的代码中,单纯靠前端代码是无法优化的;大部分的方案都是前端和客户端协作完成,以下是几个业界采用过的方案。

全局WebView

方法:

在客户端刚启动时,就初始化一个全局的WebView待用,并隐藏;

当用户访问了WebView时,直接使用这个WebView加载对应网页,并展示。

这种方法可以比较有效的减少WebView在App中的首次打开时间。当用户访问页面时,不需要初始化WebView的时间。

当然这也带来了一些问题,包括:

额外的内存消耗。

页面间跳转需要清空上一个页面的痕迹,更容易内存泄露。

【参考东软专利 - 加载网页的方法及装置CN106250434A

于是乎,准备自己写一个全局的webview,也就是webview池


public class WebViewPool {

    private static final String DEMO_URL = "http://mc.vip.qq.com/demo/indexv3";
    private static List<WebView> available = new ArrayList<WebView>();
    private static List<WebView> inUse = new ArrayList<WebView>();

    private static final byte[] lock = new byte[]{};
    private static int maxSize = 3;
    private int currentSize = 0;

    private WebViewPool() {
        available = new ArrayList<WebView>();
        inUse = new ArrayList<WebView>();
    }

    private static volatile WebViewPool instance = null;

    public static WebViewPool getInstance() {
        if (instance == null) {
            synchronized (WebViewPool.class) {
                if (instance == null) {
                    instance = new WebViewPool();
                }
            }
        }
        return instance;
    }

    /**
     * Webview 初始化
     * 最好放在application oncreate里
     * */
    public static void init() {
        for (int i = 0; i < maxSize; i++) {
            WebView webView = new WebView(BaseApplication.getInstance());
            ViewGroup.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
                    ViewGroup.LayoutParams.MATCH_PARENT);
            webView.setLayoutParams(params);
            webView.getSettings().setJavaScriptEnabled(true);
            webView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);  //设置 缓存模式(true);
            webView.getSettings().setAppCacheEnabled(false);
            webView.getSettings().setSupportZoom(false);
            webView.getSettings().setUseWideViewPort(true);
            webView.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
            webView.getSettings().setDomStorageEnabled(true);
            webView.loadUrl(DEMO_URL);
            available.add(webView);
        }
    }



    /**
     * 获取webview
     *
     * */
    public WebView getWebView() {
        synchronized (lock) {
            WebView webView;
            if (available.size() > 0) {
                webView = available.get(0);
                available.remove(0);
                currentSize++;
                inUse.add(webView);
            } else {
                webView = new WebView(BaseApplication.getInstance());
                inUse.add(webView);
                currentSize++;
            }
            ViewGroup.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
                    ViewGroup.LayoutParams.MATCH_PARENT);
            webView.setLayoutParams(params);
            webView.getSettings().setJavaScriptEnabled(true);
            webView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);  //设置 缓存模式(true);
            webView.getSettings().setAppCacheEnabled(false);
            webView.getSettings().setSupportZoom(false);
            webView.getSettings().setUseWideViewPort(true);
            webView.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
            webView.getSettings().setDomStorageEnabled(true);
            webView.loadUrl("about:blank");
            return webView;
        }
    }

    /**
     * 回收webview ,不解绑
     *@param webView 需要被回收的webview
     *
     * */
    public void removeWebView(WebView webView) {
            webView.loadUrl("");
            webView.stopLoading();
            webView.setWebChromeClient(null);
            webView.setWebViewClient(null);
            webView.clearCache(true);
            webView.clearHistory();
            webView.getSettings().setJavaScriptEnabled(true);
            webView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);  //设置 缓存模式(true);
            webView.getSettings().setAppCacheEnabled(false);
            webView.getSettings().setSupportZoom(false);
            webView.getSettings().setUseWideViewPort(true);
            webView.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
            webView.getSettings().setDomStorageEnabled(true);

            webView.getSettings().setBuiltInZoomControls(false);
            webView.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NORMAL);

            webView.getSettings().setLoadWithOverviewMode(false);

            webView.getSettings().setUserAgentString("android_client");
            webView.getSettings().setDefaultTextEncodingName("UTF-8");
            webView.getSettings().setDefaultFontSize(16);
            synchronized (lock) {
                inUse.remove(webView);
                if (available.size() < maxSize) {
                    available.add(webView);
                } else {
                    webView = null;
                }
                currentSize--;
            }
    }

    /**
     * 回收webview ,解绑
     *@param webView 需要被回收的webview
     *
     * */
    public void removeWebView(ViewGroup view, WebView webView) {
        view.removeView(webView);
        webView.loadUrl("");
        webView.stopLoading();
        webView.setWebChromeClient(null);
        webView.setWebViewClient(null);
        webView.clearCache(true);
        webView.clearHistory();
        webView.getSettings().setJavaScriptEnabled(true);
        webView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);  //设置 缓存模式(true);
        webView.getSettings().setAppCacheEnabled(false);
        webView.getSettings().setSupportZoom(false);
        webView.getSettings().setUseWideViewPort(true);
        webView.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
        webView.getSettings().setDomStorageEnabled(true);

        webView.getSettings().setBuiltInZoomControls(false);
        webView.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NORMAL);

        webView.getSettings().setLoadWithOverviewMode(false);

        webView.getSettings().setUserAgentString("android_client");
        webView.getSettings().setDefaultTextEncodingName("UTF-8");
        webView.getSettings().setDefaultFontSize(16);
        synchronized (lock) {
            inUse.remove(webView);
            if (available.size() < maxSize) {
                available.add(webView);
            } else {
                webView = null;
            }
            currentSize--;
        }
    }

    /**
     * 设置webview池个数
     * @param size webview池个数
     * */
    public void setMaxPoolSize(int size) {
        synchronized (lock) {
            maxSize = size;
        }
    }
}

附上项目地址

WebviewPool_Demo

十分感谢以下博客的分享:

一种轻量级对象池的设计与实现

WebView性能优化

WebView加载速度优化

WebView 性能、体验分析与优化

推荐阅读更多精彩内容