Android WebView page loading optimization, androidwebview

Android WebView page loading optimization, androidwebview

At present, there are more and more webapps and the experience is getting better and better. In order to better use WebView to display smooth pages, you can make the following optimizations:

• WebView Cache
• Resource File Local Storage
• Reduce time-consuming operations
• Client UI Optimization

Some may say, why not make it native, so that it doesn't have to be so troublesome. If the content I want to load is static, of course native is the best. Why should we use WebView because it can load some content that is easy to change, it also facilitates the production of multi-platform applications.

Where can WebView be optimized?

WebView Cache

Enabling the WebView cache function can reduce requests to server resources. Generally, you can use the default Cache Policy.

// Set the cache mode webView. getSettings (). setCacheMode (WebSettings. LOAD_DEFAULT); // enable the DOM storage API function webView. getSettings (). setDomStorageEnabled (true );

Resource File Local Storage

Resources and other files (do not need to update) Local Storage, directly obtain from the local when necessary. Which resources need to be stored locally? Of course, some resources will not be updated, such as slice files, js files, and css files. The replacement method is also very simple, rewrite the WebView method.

{      try {      if (url.endsWith("icon.png")) {          InputStream is = appRm.getInputStream(R.drawable.icon);          WebResourceResponse response = new WebResourceResponse("image/png",            "utf-8", is);          return response;      } else if (url.endsWith("jquery.min.js")) {          InputStream is = appRm.getInputStream(R.raw.jquery_min_js);          WebResourceResponse response = new WebResourceResponse("text/javascript",            "utf-8", is);          return response;      }      } catch (IOException e) {      e.printStackTrace();      }      return super.shouldInterceptRequest(view, url);}

1. AppRm is the app resource manager. Reading resources in drawable, assets, and raw is a simple function call in the android system.

2. The getInputStream parameter indicates the specific resource location.

3. The resource type after WebResourceResponse needs to be correctly written.

Sometimes we will add some statistical code to our website, which can also be simplified (about 10 K of CNZZ we use ), you can use Charles to capture packets from the client.

Reduce time-consuming operations

To be accurate, it is to reduce the synchronization operation time and try to use asynchronous operations instead of synchronous operations. If the server has time-consuming operations for reading databases and computing, try to use Asynchronous (ajax) operations to spend the original time on asynchronous operations.

For example, from page A to page B, the logon function is provided on page A, and the main function page is displayed on page B. If user login information is verified on page B, the loading time of page B will be longer (database query and other operations), and the client may need to provide a waiting box (or progress bar, etc.) to the user, let's take A look at the advantages of using asynchronous operations on page:

• A uniform js wait box can be provided to ensure consistency among multiple platforms and reduce the workload of client code.
• The page loading time becomes shorter. Page B reduces the loading time and user wait time due to time-consuming operations.
• You can easily add some verification control logic without page Jump. Page A can be judged based on the asynchronous operation results and processed accordingly.

Client UI Optimization

How can users not see the white page before the WebView is loaded? After loading for the first time, the page Jump can be optimized using the above steps to provide a good user experience. What about loading the first page? We need WebView to pre-load the page. How can we do this? The following two methods are provided:

• ViewPager: puts the welcome page and WebView page together into ViewPager, sets the number of pre-loaded pages, so that the page where WebView is located can be pre-loaded, and switches to the page where WebView is located upon loading.
• FrameLayout: combines the welcome page with the WebView page layout. It is displayed in one page. The WebView layout is hidden at the beginning. After the WebView is loaded, the welcome layout is hidden and the WebView layout is displayed.

FrameLayout is easier to use. Both methods need to listen to the onProgressChanged of WebChromeClient. After loading, switch the page as follows:

WebView. setWebChromeClient (new WebChromeClient () {@ Override public void onProgressChanged (WebView view, int newProgress) {super. onProgressChanged (view, newProgress); if (newProgress >=100) {// switch page }}});

After several optimization steps above, a smooth webapp is generated.

For more articles, visitXiaopengxuan.

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.