16

Is there a way to improve the speed of loading an local .html file into a WebView. The .html files are stored in the /assets Folder.

As you can see in the video (Sorry, link is broken!), TextView (red beackground) is rendered before the transistion starts, while the text in the WebView is shown afterwards. How can i achieve to load the WebView as fast as the TextView?

//current implementation
webView.setInitialScale(1);
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setLoadWithOverviewMode(true);
webView.getSettings().setUseWideViewPort(true);
webView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
webView.setScrollbarFadingEnabled(false);

webView.loadUrl("file:///android_asset/disclaimer.html");

SUMMARY

It's not possible. I tried all comments here and it didn't make a difference.

The reason I ask was, that we had an application for iOS and Android, which mainly consists of simple TextViews and Images. So we had the idea of creating local html files, which we could use in both applications. In iOS this works like a charm, but in Android we couldn't get rid of the loading time, so I always had a blank screen and after 100-200ms the content appears.

I guess Androids WebView starts rendering if the Activity is visible. This totally make sense in online mode, because you don't want to load several html pages, which the user opens in a new tap in the background, before he actually focus them. However, in offline mode (local html files stored in the application assets) this behaviour is unnecessary, but you cannot change it.

Now we really now why phonegap & co sucks.

Just for the record: In the end, I used an activity with an empty LinearLayout container, where you could insert contents programatically. Each style (Headline 1, Headline 2, Content...) had an own layout xml file

public void insertHeadline(int id){

    String text = getString(id);
    TextView headline = (TextView) inflater.inflate(R.layout.layout_text_headline, null, false);
    headline.setText(text);

    //add this TextView to the empty container
    myLinearLayoutContainerView.addView(headline);

}
longi
  • 11,104
  • 10
  • 55
  • 89

4 Answers4

9

It depends on the web application being loaded. Try some of the approaches below:

Set higher render priority (deprecated from API 18+):

webview.getSettings().setRenderPriority(RenderPriority.HIGH);

Enable/disable hardware acceleration:

if (Build.VERSION.SDK_INT >= 19) {
// chromium, enable hardware acceleration
webView.setLayerType(View.LAYER_TYPE_HARDWARE, null);
} else {
   // older android version, disable hardware acceleration
   webView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
}

Disable the cache:

webview.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);
Nirmal Shethwala
  • 268
  • 1
  • 15
5

WebView will always have longer render times than a native TextView. I think it's nature of platform but maybe you can try reading html content to a String before loading screen (for avoid webview from file system operation). And then set String with:

webview.loadDataWithBaseURL("", earlyReadedHtmlString, "text/html", "UTF-8", "");

In theoretically, this must be faster and fair for webview. Another way is waiting for onPageFinished() and then show textview. It can be a workaround.

asozcan
  • 1,370
  • 1
  • 17
  • 24
3

A webview cannot ever be rendered as fast as a textview (unless you really are abusing the textview such as loading thousands of lines of text) no matter how many switches you turn on/off and how many optimizations and tweaks you try. The rendering mechanism favours a textview because it is more limited in how you can specify changes to its normal presentation, because a webview can load external ressources, because css modify presentation, because javascript can influence presentation, because it needs more memory and initializations to support all these functions, ...

It is the reason why a phonegap/cordova app cannot ever be as snappy and interactive as a native app. Well, unless the native app is only made of webviews :P

You still can try to improve webview's load/render time by modifying it's configuration but you are better to wait until your content is defined. All those settings, allow improvements under specific circumstances and, for example, changing the layer type may help or worsen your render time for different pages. As Nirmal mentionned in his answer, some of those known to have a bigger impact are layerType, cacheMode and renderPriority

I assume tough, that what you wanted to achieve is prevent your users to see an incomplete screen. You could render a webview before showing your screen by using onPageFinished but it would not load faster, the user would have to wait longer until the screen transitions and you'd probably need a spinning wheel.

In my experience, the way you implemented your transition is the better user experience and I would wait until you have your html content defined before trying to optimize load times.

If you already find the current experience already irritating tough, I would consider taking all html content / webviews out.

user3802077
  • 849
  • 9
  • 22
2

Assets are slow to access because they are contained within the apk file, which is essentially a glorified zip file.

I would write a startup routine that simply takes the files from assets and writes them to internal storage (or external storage if they are quite large and contain no sensitive data.

Once you have extracted them from the apk's assets, they are much much faster to access.

shredder
  • 1,438
  • 13
  • 12