Android webview Page Load optimization

At present WebApp more and more, the experience is also getting better, in order to be able to use WebView to show the smooth page, can be optimized from the following points:

• WebView Cache
• Resource file Local Storage
• Reduce time-consuming operations
• Client UI Optimizations

Someone might say, why not make a native, so it won't be so troublesome. If what I need to load is static, and of course it's best to make native, why should we use WebView, because it can load something that's easy to change, and it makes it easy to build multiplatform apps.

Where can the WebView be optimized?

WebView Cache

Turning on the WebView cache feature reduces requests for server resources, typically using the default cache policy.

//设置 缓存模式 webView.getSettings().setCacheMode(WebSettings.LOAD_DEFAULT);  // 开启 DOM storage API 功能 webView.getSettings().setDomStorageEnabled(true

Resource file Local Storage

Resources and other files (which do not need to be updated) are stored locally and are obtained directly from local sources when needed. Which resources need us to store in the local, of course, some will not be updated resources, sample files, JS files, CSS files, replace the method is also very simple, rewrite WebView method can be.

{Try{if(Url.endswith ("Icon.png")) {InputStream is= Apprm.getinputstream (R.drawable.icon); Webresourceresponse response =NewWebresourceresponse ("Image/png","Utf-8", is);returnResponse }Else if(Url.endswith ("Jquery.min.js")) {InputStream is= Apprm.getinputstream (R.RAW.JQUERY_MIN_JS); Webresourceresponse response =NewWebresourceresponse ("Text/javascript","Utf-8", is);returnResponse }      }Catch(IOException e)      {E.printstacktrace (); }return Super. shouldinterceptrequest (view, URL);}

1. APPRM is the app Explorer, reading the resources under the Drawable,assets,raw, are some very simple function calls of the Android system.

2. getinputstream parameters represent resource-specific locations

3. webresourceresponse needs to be written correctly

Sometimes we add some statistical code to our website, which can be reduced (about 10k of the cnzz you use), and you can use Charles to grab a packet for the client.

Reduce time-consuming operations

To be precise, it is to reduce the operation time of the synchronization operation and try to replace the synchronous operation with asynchronous operation. If the server has read the database and computation time-consuming operations, try to use asynchronous (Ajax) to operate, the original time spent on asynchronous operations.

For example, a page to B page, a page implementation login function, b page display main function page, if let b page to user login information verification, b page load time will be longer (database query, etc.), while 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:

• can provide a unified JS waiting box, multi-platform to maintain consistency, reduce client code workload.
• The time to load the page becomes shorter. b page because of reduced time-consuming operations, the load time is shorter and the user waiting time is shorter.
• It is convenient to add some verification control logic, which does not require page jump. A page can be based on the asynchronous operation to determine the results, to make corresponding processing.

Client UI Optimizations

How to let the user can't see the white page before WebView loading? The first load after the page jump can be optimized with the above steps, can provide users a good experience, that load the first page? We need to webview the pre-load page, how can this be done? Here are two ways to do this:

• Viewpager, the Welcome page and the WebView page into the Viewpager, set the number of pre-loaded pages, so that the WebView page can be preloaded, at the time of loading is complete switch to the page where WebView.
• Framelayout, the Welcome page and the layout of the WebView page together, displayed in a page, the beginning of the hidden WebView layout, to be webview loaded, hide the welcome layout, display WebView layout.

Using Framelayout simple, both methods are required to listen to the webchromeclient onprogresschanged, loading completed page switching, as follows:

Webview.setwebchromeclient (NewWebchromeclient () {@Override        Public   void onprogresschanged(WebView view, int newprogress) {Super. onprogresschanged (view, newprogress);if(Newprogress >= -) {//Toggle Page}        }    });

After the optimization of the above steps, a smooth WebApp was generated.

For more articles, please visit the little Fat Xuan .

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Android webview Page Load optimization