webview 闪烁

遇到的问题:有GIF的动态图片和图片较多的页面会闪烁不停,、webView滑动到底部部分文字也会闪烁

webVIew的功能请参考:https://blog.csdn.net/janice0529/article/details/41318755

造成闪烁的原因是WebView在Android5.0开始默认开启了硬件加速,从Android3.0(API Level 11)开始,支持硬件加速,可充分利用GPU的特性,使得界面渲染更加平滑,但是会消耗更多内存RAM。但是硬件加速自身并非完美,在某些Android5.0的rom上,由于内存RAM分配的问题,如果代码不当,会引发闪屏、花屏等渲染问题

硬件加速的好处

硬件加速对渲染的流畅度有大幅提升。
在开启硬件加速后,上下拖动列表的感觉是没有跳帧的平滑拖动感,如果没有硬件加速,拖动时能感受到有丢帧。
在窗体切换动画上也类似,硬件加速开关对切换动画的影响很大。
对于video、canvas、webgl,没有硬件加速是没法商用的,Android webview里video标签里的视频如果没有硬件加速会看不到画面。

硬件加速的代价

硬件加速属于双缓冲机制,使用显存进行页面渲染(使用较少的物理内存),导致更频繁的显存操作,可能引起以下现象:
白屏、花屏、闪屏;
低RAM内存配置手机上闪退。
虽然新出的Android5.0的手机整体配置较高(显存较大),但是如果页面中使用大量图片或者过于复杂的CSS样式时同样容易出现白屏、花屏、闪屏现象。
解决硬件加速造成的问题有2个思路,1.降低页面的内存占用,给硬件加速腾出RAM;2.在适当的地方关闭硬件加速。

方案1:通过其他方式降低页面的内存占用,给硬件加速腾出RAM

App中占用RAM比较多的地方包括同时显示的webview的数量和webview的dom体积以及图片体积。
大多数开发者报App闪屏,一问下来大多数是开启硬件加速且这3块的代码有问题。
努力优化这3块就能解决问题。
我们遇到有开发者的App一个界面并显3个webview,其中一个webview里显示几十张体积数M的图,这样的App渲染必然异常。

  • 图片处理

图片是已知问题中最高概率发生的问题,也是解决起来最简单有效的问题。
把图片裁剪到几十K,即便还是3个webview也不再出问题。
有些app里设了很大的背景图,此时非常影响渲染,请尽量不要设背景图或使用少量的背景图。
如果要显示清晰高清图,尽量设计成不在同一界面并显多张高清大图。

  • webview处理

关于webview的并显数量,常见的并显结构有解决列表滚动的父子窗体、侧滑菜单webview、底部选项卡webview。
其中底部选项卡webview最占内存,如果必须使用这种设计,就更要注意图片体积的控制。
webview侧滑菜单其实可以尽量改为div方式的侧滑菜单。
webview侧滑菜单比div侧滑菜单的优势是菜单rom复杂也可以平滑移动,以及可以盖住native的控件比如plus.map,但我们仍然建议非必要不使用webview侧滑菜单,把侧滑菜单设计的简单点,采用div方式会更节约内存。
解决列表流畅滚动的父子窗体,制作时注意把子窗体dock,dock模式能降低渲染压力,减少并显的webview的显示区域。

  • HTML、JS、CSS代码处理

减少dom复杂度,很多开发者的代码里div反复单层嵌套,毫无意义并且增加dom解析和渲染的压力;
减少重型js框架的依赖,angular、jq能不用就不用;
减少css代码,尽可能的少写css,不要写互相覆盖的无效css,不要使用复杂的css计算模型;
css里少用百分比方式的定位和宽高计算,少用padding、margin。有的开发者的界面元素刚显示时在这个位置,过一会儿抖动一下往下移动了几个像素,就是因为margin、padding生效晚导致二次渲染。
如果有图片轮播,且发生闪屏,把自动轮播禁用掉,不要自动切换图片。

  • webview动画切换改为pop-in

pop-in动画的切换是有自动截图处理的,这种动画发生花屏闪屏的概率要比较低。

  • webview的出入栈控制

为了节省内存,不显示的webview默认是出栈的。
在返回时,之前的窗体会重新入栈,有时这种重新入栈渲染的过程也会发生白屏。
如果你的app内存占用不高,可以控制一些界面不出栈,返回时就会直接看到之前的内容。
控制不出栈的api在http://www.html5plus.org/doc/zh_cn/webview.html,这里搜render来控制。

方案2

造成闪烁的原因是WebView5.0开启了硬件加速,所以首要任务是关闭硬件加速,有三种

1、 AndroidManifest.xml中的Activity配置:android:hardwareAccelerated="false"

2、WebView xml中:android:layerType="software",ListView(或者外层嵌套ScrollView)android:layerType="software”
  3、Java代码设置:

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
          mWebView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
        }

但是关闭硬件加速后会造成:View too large to fit into drawing cache, needs 183047040 bytes, only 8294400 available。有人说是设置android:hardwareAccelerated="false"即可解决,但本人项目中并无卵用,所以,

1、设置:mWebView.setDrawingCacheEnabled(false);  mWebView.getSettings().setLoadWithOverviewMode(true);

2重写webView

public class MyWebView extends android.webkit.WebView {
 public MyWebView(Context context) {
     super(context);
 }

 public MyWebView(Context context, AttributeSet attrs) {
     super(context, attrs);
 }

 public MyWebView(Context context, AttributeSet attrs, int defStyleAttr) {
     super(context, attrs, defStyleAttr);
 }
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
     invalidate();
     super.onMeasure(widthMeasureSpec, heightMeasureSpec);
 }
}
mWebView.setDrawingCacheEnabled(false);
      mWebView.getSettings().setLoadWithOverviewMode(true);
      mWebView.getSettings().setJavaScriptEnabled(true);
      mWebView.loadUrl(url);
      mWebView.setWebViewClient(new WebViewClient() {
          @Override
          public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {
              super.onReceivedSslError(view, handler, error);
              handler.proceed();
          }

          @Override
          public boolean shouldOverrideUrlLoading(WebView view, String url) {
              mWebView.loadUrl(url);
              return true;
          }

          @Override
          public void onPageFinished(WebView view, String url) {
              super.onPageFinished(view, url);
          }
      });
      mWebView.setWebChromeClient(new WebChromeClient() {
          @Override
          public void onProgressChanged(WebView view, int newProgress) {
              super.onProgressChanged(view, newProgress);
          }
      });

目前我的情况和做法是:scrollView里嵌套了webVIew和listview。我直接把scrollview 的硬件加速关了就不闪烁了。可是滑动的时候就没那么顺畅了(就是只在scrollView加上android:layerType="software")。本来是按照上面的办法做的。

你可能感兴趣的:(webview 闪烁)