我们在native与网页相结合开发的过程中,难免会遇到关于WebView一些共通的问题。就我目前开发过程中遇到的问题以及最后得到的优化方案都将在这里列举出来。有些是老生常谈,有些则是个人摸索得出解决方法。下面就是整理得到的些干货。
1.加快HTML网页装载完成的速度
默认情况html代码下载到WebView后,webkit开始解析网页各个节点,发现有外部样式文件或者外部脚本文件时,会异步发起网络请求下载文件,但如果在这之前也有解析到image节点,那势必也会发起网络请求下载相应的图片。在网络情况较差的情况下,过多的网络请求就会造成带宽紧张,影响到css或js文件加载完成的时间,造成页面空白loading过久。解决的方法就是告诉WebView先不要自动加载图片,等页面finish后再发起图片加载。
故在WebView初始化时设置如下代码:
1
2
3
4
5
6
7
|
public void int () {
if(Build.VERSION.SDK_INT >= 19) {
webView.getSettings().setLoadsImagesAutomatically(true);
} else {
webView.getSettings().setLoadsImagesAutomatically(false);
}
}
|
同时在WebView的WebViewClient实例中的onPageFinished()方法添加如下代码:
1
2
3
4
5
6
|
@Override
public void onPageFinished(WebView view, String url) {
if(!webView.getSettings().getLoadsImagesAutomatically()) {
webView.getSettings().setLoadsImagesAutomatically(true);
}
}
|
从上面的代码,可以看出我们对系统API在19以上的版本作了兼容。因为4.4以上系统在onPageFinished时再恢复图片加载时,如果存在多张图片引用的是相同的src时,会只有一个image标签得到加载,因而对于这样的系统我们就先直接加载。
2.自定义出错界面
当WebView加载页面出错时(一般为404 NOT FOUND),安卓WebView会默认显示一个卖萌的出错界面。但我们怎么能让用户发现原来我使用的是网页应用呢,我们期望的是用户在网页上得到是如原生般应用的体验,那就先要从干掉这个默认出错页面开始。当WebView加载出错时,我们会在WebViewClient实例中的onReceivedError()方法接收到错误,我们就在这里做些手脚:
1
2
3
4
5
6
|
@Override
public void onReceivedError (WebView view, int errorCode, String description, String failingUrl) {
super.onReceivedError(view, errorCode, description, failingUrl);
loadDataWithBaseURL(null, "", "text/html", "utf-8", null);
mErrorFrame.setVisibility(View.VISIBLE);
}
|
从上面可以看出,我们先使用loadDataWithBaseURL清除掉默认错误页内容,再让我们自定义的View得到显示(mErrorFrame为蒙在WebView之上的一个LinearLayout布局,默认为View.GONE)。
3.是否存在滚动条
当我们做类似上拉加载下一页这样的功能的时候,页面初始的时候需要知道当前WebView是否存在纵向滚动条,如果有则不加载下一页,如果没有则加载下一页直到其出现纵向滚动条。首先继承WebView类,在子类添加下面的代码:
1
2
3
|
public boolean existVerticalScrollbar () {
return computeVerticalScrollRange() > computeVerticalScrollExtent();
}
|
computeVerticalScrollRange得到的是可滑动的最大高度,computeVerticalScrollExtent得到的是滚动把手自身的高,当不存在滚动条时,两者的值是相等的。当有滚动条时前者一定是大于后者的。
4.是否已滚动到页面底部
同样我们在做上拉加载下一页这样的功能时,也需要知道当前页面滚动条所处的状态,如果快到底部,则要发起网络请求数据更新网页。同样继承WebView类,在子类覆盖onScrollChanged方法,具体如下:
1
2
3
4
5
6
7
8
9
10
11
12
|
@Override
protected void onScrollChanged(int newX, int newY, int oldX, int oldY) {
super.onScrollChanged(newX, newY, oldX, oldY);
if (newY != oldY) {
float contentHeight = getContentHeight() * getScale();
if (mCurrContentHeight != contentHeight && newY > 0 && contentHeight <= newY + getHeight() + mThreshold) {
mCurrContentHeight = contentHeight;
}
}
}
|
上面mCurrContentHeight用于记录上次触发时的网页高度,用来防止在网页总高度未发生变化而目标区域发生连续滚动时会多次触发TODO,mThreshold是一个阈值,当页面底部距离滚动条底部的高度差<=这个值时会触发TODO。
5.远程网页需访问本地资源
当我们在WebView中加载出从web服务器上拿取的内容时,是无法访问本地资源的,如assets目录下的图片资源,因为这样的行为属于跨域行为(Cross-Domain),而WebView是禁止的。解决这个问题的方案是把html内容先下载到本地,然后使用loadDataWithBaseURL加载html。这样就可以在html中使用file:///android_asset/xxx.png的链接来引用包里面assets下的资源了。示例如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
private void loadWithAccessLocal(final String htmlUrl) {
new Thread(new Runnable() {
public void run() {
try {
final String htmlStr = NetService.fetchHtml(htmlUrl);
if (htmlStr != null) {
TaskExecutor.runTaskOnUiThread(new Runnable() {
@Override
public void run() {
loadDataWithBaseURL(htmlUrl, htmlStr, "text/html", "UTF-8", "");
}
});
return;
}
} catch (Exception e) {
Log.e("Exception:" + e.getMessage());
}
TaskExecutor.runTaskOnUiThread(new Runnable() {
@Override
public void run() {
onPageLoadedError(-1, "fetch html failed");
}
});
}
}).start();
}
|
上面有几点需要注意:
- 从网络上下载html的过程应放在工作线程中
- html下载成功后渲染出html的步骤应放在UI主线程,不然WebView会报错
- html下载失败则可以使用我们前面讲述的方法来显示自定义错误界面
6.ViewPager里非首屏WebView点击事件不响应
如果你的多个WebView是放在ViewPager里一个个加载出来的,那么就会遇到这样的问题。ViewPager首屏WebView的创建是在前台,点击时没有问题;而其他非首屏的WebView是在后台创建,滑动到它后点击页面会出现如下错误日志:
20955-20968/xx.xxx.xxx E/webcoreglue﹕ Should not happen: no rect-based-test nodes found
解决这个问题的办法是继承WebView类,在子类覆盖onTouchEvent方法,填入如下代码:
1
2
3
4
5
6
7
|
@Override
public boolean onTouchEvent(MotionEvent ev) {
if (ev.getAction() == MotionEvent.ACTION_DOWN) {
onScrollChanged(getScrollX(), getScrollY(), getScrollX(), getScrollY());
}
return super.onTouchEvent(ev);
}
|
该方法的最先提出在WebView
in ViewPager not receive user inputs。
7.WebView硬件加速导致页面渲染闪烁
4.0以上的系统我们开启硬件加速后,WebView渲染页面更加快速,拖动也更加顺滑。但有个副作用就是,当WebView视图被整体遮住一块,然后突然恢复时(比如使用SlideMenu将WebView从侧边滑出来时),这个过渡期会出现白块同时界面闪烁。解决这个问题的方法是在过渡期前将WebView的硬件加速临时关闭,过渡期后再开启,代码如下:
1
2
3
|
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {
webview.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
}
|
8.避免addJavaScriptInterface带来的安全问题
使用开源项目Safe Java-JS WebView Bridge可以很好替代addJavaScriptInterface方法,同时增加了异步回调等支持,并且不存在了安全风险。
9.WebView与上层父元素的TouchMove事件冲突
在开发过程中你可能会遇到这样一种情况。端里面使用ViewPager嵌套了多个WebView页面,同时某一个WebView中的页面元素需要响应TouchMove事件。正如下图所示的情景:
这时你就会发现上层(ViewPager)阻断了下层(WebView)接收TouchMove事件,即使你的WebView在TouchDown时返回true也无效,因为上层直接使用了onInterceptTouchEvent对后续的TouchMove进行了拦截。针对这个问题的解决,简单做法是在重写WebView onTouchEvent方法,如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
@Override
public boolean onTouchEvent(MotionEvent ev) {
boolean ret = super.onTouchEvent(ev);
if (mPreventParentTouch) {
switch (ev.getAction()) {
case MotionEvent.ACTION_MOVE:
requestDisallowInterceptTouchEvent(true);
ret = true;
break;
case MotionEvent.ACTION_UP:
case MotionEvent.ACTION_CANCEL:
requestDisallowInterceptTouchEvent(false);
mPreventParentTouch = false;
break;
}
}
return ret;
}
public void preventParentTouchEvent () {
mPreventParentTouch = true;
}
|
代码控制的关键在于mPreventParentTouch这个变量,mPreventParentTouch默认为false,当用户touchdown页面元素时通知该WebView将mPreventParentTouch设置为true。示意代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
|
<script type="text/javascript">
document.getElementById("targetEle").addEventListener("touchstart",
function(ev) {
HostApp.preventParentTouchEvent();
}
);
document.getElementById("targetEle").addEventListener("touchmove",
function(ev) {
}
);
</script>
|
关于web页面如何通知WebView(即调用Java方法)请参看第8条。
刚提到了上面是一种简单的做法,并不能很好的解决手指滑动过快带来的误操作问题,即当用户快速地滑动时,还是有一定机率会出现ViewPager拦截TouchMove事件而发生了Tab切换而非页面元素做出了响应。要完美解决此问题,就要用到稍微复杂一点的方法(仅是整体消息传递流程复杂一点)。
首先假设在ViewPager之上还有一个父元素叫做ParentViewOnViewPager,当我们接收到页面preventParentTouchEvent通知时就先于ViewPager而进行拦截。如下:
ParentViewOnViewPager.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
public class ParentViewOnViewPager extends FrameLayout {
private MineWebView mDispatchWebView;
public void preventParentTouchEvent (WebView view) {
mDispatchWebView = (MineWebView)view;
}
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
if (ev.getAction() == MotionEvent.ACTION_MOVE && mDispatchWebView != null) {
mDispatchWebView.ignoreTouchCancel(true);
return true;
}
return false;
}
@Override
public boolean onTouchEvent(MotionEvent ev) {
if (mDispatchWebView != null){
switch (ev.getAction()) {
case MotionEvent.ACTION_MOVE:
mDispatchWebView.onTouchEvent(ev);
break;
default:
mDispatchWebView.ignoreTouchCancel(false);
mDispatchWebView.onTouchEvent(ev);
mDispatchWebView = null;
break;
}
return true;
}
return super.onTouchEvent(ev);
}
}
|
即当ParentViewOnViewPager接收到通知时,发起TouchEvent拦截,将拦截到的Touch事件转嫁到装载页面的mDispatchWebView进行事件派发。这样就直接跳过了ViewPager这一层。这里需要注意的是当ParentViewOnViewPager发起拦截时,WebView会接收到一个TouchCancel事件,WebView应该忽略这个事件,以避免页面接收到这个事件而打断整个处理流程。如下代码所示:
MineWebView.java
1
2
3
4
5
6
7
8
9
10
11
12
|
public class MineWebView extends WebView {
boolean mIgnoreTouchCancel;
public void ignoreTouchCancel (boolean val) {
mIgnoreTouchCancel = val;
}
@Override
public boolean onTouchEvent(MotionEvent ev) {
return ev.getAction() == MotionEvent.ACTION_CANCEL && mIgnoreTouchCancel || super.onTouchEvent(ev);
}
}
|
另外针对这种解决方案,页面端的JS脚本不用做任何变动。
原文:http://www.pedant.cn/2014/09/10/webview-optimize-points/
谢谢分享
分享到:
相关推荐
Android WebView 优化之路,如何才能更有效的对Android WebView进行优化,本文将为大家一一举例,感兴趣的小伙伴们可以参考一下
Android-X5WebView基本封装和使用 通过OkHttp拦截器、自定义CookieJar有效完成客户端与H5端的Cookie同步管理 监听WebView的加载进度 滚动条的设置(隐藏或者显示,内侧显示还是外侧显示) 优化X5WebView的预加载问题...
webview全称叫做Android System WebView,它是Android生态系统的重要组成部分,也是Chrome浏览器的内核。可以让你的手机变得瞬间畅通,它会及时优化网页相关数据,有着接入式的操作体验数据,各种类型的应用程序可...
但是android的webview默认支持的功能非常弱,很多地方都是需要自定义的,才能达到我们想要的效果。并且webview在不同的版本会有不同程度的bug。下面小编把webview经常出现的问题给大家整理如下: 1.为WebView自定义...
做webview加载网页时,遇到一个问题,自带的webview错误页面不美观,于是自定义一个view提示用户,网上很多方法,也不稳定实现替换,结合网上的一些例子,加以优化和拓展,特此写一个完整版本的Demo供大家拿来直接...
利用webview查看阅读pdf资源(支持在线),对webview加载速度进行优化流畅。
主要介绍了Android中替换WebView加载网页失败时的页面,非常不错,具有参考借鉴价值,需要的朋友参考下吧
webview加载大量图片的问题(优化方案) 自定义关于webview的缓存系统 webview与native的交互 关于交互其实网上有很多文章,在之前我也写过一篇关于webview与native交互方案的blog: Android混合开发的入门和方案 ...
它的作用是提供一种系统性的方法,以有效地应对挑战、优化流程或实现目标。以下是方案的主要作用: 问题解决: 方案的核心目标是解决问题。通过系统性的规划和执行,方案能够分析问题的根本原因,提供可行的解决...
它的作用是提供一种系统性的方法,以有效地应对挑战、优化流程或实现目标。以下是方案的主要作用: 问题解决: 方案的核心目标是解决问题。通过系统性的规划和执行,方案能够分析问题的根本原因,提供可行的解决...
CandyWebCache是移动端web资源的本地缓存解决方案,能够拦截webview的请求,并优先使用本地缓存静态资源进行响应,以此来对webview加载页面性能进行优化。 特点: 协议层拦截请求,透明替换响应 静态资源版本控制及...
5篇和Android内存优化、性能优化有关的文档,常见内存泄露及优化方案,单例、静态变量、非静态内部类、Timer和TimerTask、资源未关闭或释放、属性动画、WebView
WebView可以很好地帮助我们展示html页面,但是webview使用不当的话还是可能产生一定问题的,下面就以下几个方面说说我的优化技巧 1、展示webview的activity可以另开一个进程,这样就能和我们app的主进程分开了,即使...
一个通用的Android端弹窗管理框架,内部维护弹窗优先级队列 具备弹窗管理扩展功能 整合Dialog,PoupoWindow,悬浮Widget,透明Webview,Toast,SnackBar,无需再为繁琐的业务弹窗逻辑所困扰如何添加依赖只需要两行代码轻松...
15.6 AndroidUI优化 15.7 其他优化 15.7.1 zipalign 15.7.2 图片优化 15.8 小结 第五部分 扩展篇 第16章 Android NDK开发 16.1 AndroidNDK简介 16.2 安装和配置NDK开发环境 16.2.1 系统和软件...
不仅详细讲解了Android框架、Android组件、用户界面开发、游戏开发、数据存储、多媒体开发和网络开发等基础知识,而且还深入阐述了传感器、语音识别、桌面组件开发、Android游戏引擎设计、Android应用优化、OpcnGL等...
优化增强的缓存机制(SimpleCache).rar 加载本地图片,绝对不会出现OOM.rar 图片左右滑动 点击放大.zip 图片轮播(Viwepager)+(读取网络图片)+点击图片(WebView)展示.rar 安卓图片旋转放大缩写透明度调整例子.rar ...
14 8 性能优化">下载一个cebx阅读器即可 《Android高薪之路:Android程序员面试宝典》目录: 第1章 Android入门 1 1 关于Android的非技术问题 1 1 1 为什么看好 Android 1 1 2 以前是否从事过Android的工作 做过...
15.6 AndroidUI优化 15.7 其他优化 15.7.1 zipalign 15.7.2 图片优化 15.8 小结 第五部分 扩展篇 第16章 Android NDK开发 16.1 AndroidNDK简介 16.2 安装和配置NDK开发环境 16.2.1 系统和软件...