Enhance webView performance (should be the same performance as native Web Browser)

44
votes

My experience is that loading websites in a WebView is much slower than performing the same actions in the Android Web Browser. I can see that all files have been loaded in my Apache log, it will take a few seconds until the page is displayed in the WebView control, however. Opening the same page in the native Web browser will result in an immediate display. It seems that rendering is somehow crippled.

Which browser settings do we have to apply in order to achieve the same performance as loading the page in the native web browser?

Our current settings:

browserset.setLoadsImagesAutomatically(true);
browserset.setJavaScriptEnabled(true);
browserset.setDatabaseEnabled(true);
browserset.setDatabasePath("data/data/com.xxx/databases");
browserset.setDomStorageEnabled(true);
browserset.setRenderPriority(WebSettings.RenderPriority.HIGH);
browserset.setSupportZoom(false);
browserset.setUserAgentString( browserset.getUserAgentString() + " (XY ClientApp)" );
browserset.setAllowFileAccess(true);
browserset.setSavePassword(false);
browserset.setSupportMultipleWindows(false);
browserset.setAppCacheEnabled(true);
browserset.setAppCachePath("");
browserset.setAppCacheMaxSize(5*1024*1024);
2
androidperformancewebview

2 Answers

18
votes

I finally got the reason of android webview bad performance issue. Notice the image below... It used 12 seconds from OnPageStarted to OnPageFinished. Because it should load CSS,javascript and ... AJAX...

the debug window:

I notice that JQuery and JQueryMobile need load all DOM struct in Html.So if I lazy load the javascript after OnPageFinished,it should show page faster.

First use setTimeout instead of $(document).ready(function() {}); in JQuery.Then use lazyload javascript file.

The final html and javascript is:

<script src="/css/j/lazyload-min.js" type="text/javascript"></script>

        <script type="text/javascript" charset="utf-8"> 

       loadComplete(){

          //instead of $(document).ready(function() {});

       }

        function loadscript()

        {

LazyLoad.loadOnce([

 '/css/j/jquery-1.6.2.min.js',

 '/css/j/flow/jquery.flow.1.1.min.js',  

 '/css/j/min.js?v=2011100852'

], loadComplete);

        }

        setTimeout(loadscript,10);

        </script>

You can find lazyload-min.js in http://wonko.com/post/painless_javascript_lazy_loading_with_lazyload

After do that,you can see the log image below:

after change the javascript

Now, it only takes 2 seconds from OnPageStarted to OnPageFinished.

I posted the article at https://wenzhang.baidu.com/page/view?key=22fe27eabff3251f-1426227431

But it was written in Chinese:)

17
votes

I ran into a similar issue, and after some heavy debugging noticed the native browser and WebView browser seem to be using different caches.

This code can be used to disable the WebView cache, and made WebView much faster for me (though at the expense of not caching). Note that it uses private APIs, so by using it you're risking the code will break in future releases:

try
{
  Method m = CacheManager.class.getDeclaredMethod("setCacheDisabled", boolean.class);
  m.setAccessible(true);
  m.invoke(null, true);
}
catch (Throwable e)
{
  Log.i("myapp","Reflection failed", e);
}