WebviewPool 打造属于自己的WebView池 ,优化W
最近把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;
}
}
}
附上项目地址
十分感谢以下博客的分享：
