Introduction to WebView loading optimization methods

This article brings you an introduction to the method of WebView loading optimization. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

WebView loading optimization

When the frequency of use of WebView becomes frequent, the optimization of all aspects of it becomes increasingly important. What you can know is that every time we load an H5 page, there will be a lot of requests. In addition to the request of the HTML main URL itself, the JS, CSS, font files, and images referenced externally by the HTML are all independent HTTP requests. Although the requests are concurrent, when the overall number of web pages reaches a certain level, plus The browser parsing and rendering time, and the overall loading time of the Web become very long. The more files requested at the same time, the more traffic will be consumed. Then the optimization of loading becomes very important. I have no other experience in this area. There are probably three aspects:
One is the issue of resource localization
First of all, it is clear that with the current Due to network conditions, the speed of obtaining resources from the server through the network is far slower than reading them locally. Talking about various optimization strategies actually ignores the fact that "requiring loading" is the biggest stumbling block to speed improvement. So our first idea is to localize some heavier resources such as js, css, pictures and even HTML itself. Every time these resources are loaded, they are read and loaded from the local area. They can be simply remembered as "save". ·Get·Update".
1. "Save" - ​​package the above heavyweight resources into apk files, and fetch them locally every time the corresponding files are loaded. You can also not package it, dynamically download and store it during the first load and at subsequent intervals, and store all resource files in the Android asset directory;
2. "Get" - Rewrite the WebResourceResponse of WebViewClient The shouldInterceptRequest(WebView view, WebResourceRequest request) method intercepts the corresponding request through a certain identification method (such as a regular expression), reads the corresponding resource from the local and returns it;
3. "Update" - Establish a Cache Control mechanism , control the updates of local resources regularly or in the form of API notifications to ensure that local resources are up to date and available.
The second one is the problem of caching
If you do not adopt or do not fully adopt the first resource localization idea, then your WebView cache must be turned on (although this idea is different from the first idea) There are overlaps).

WebSettings settings = webView.getSettings(); 
settings.setAppCacheEnabled(true); 
settings.setDatabaseEnabled(true); 
settings.setDomStorageEnabled(true);//开启DOM缓存 
settings.setCacheMode(WebSettings.LOAD_DEFAULT);

When the network is normal, the default caching strategy is adopted, and the cache is loaded when the cache is available and has not expired. Otherwise, resources are obtained through the network to reduce the number of network requests for the page.
It’s worth mentioning here that when we often use WebView to display pages in apps, we don’t want the user to feel that he is visiting a web page. Because if there are too many web pages in our app, and we give users the feeling that they are visiting web pages, our app will lose its meaning. (I mean why don't users use the browser directly?)
So at this time, the issue of offline caching deserves our attention. We need to allow users to still operate our app when there is no Internet, instead of facing a page that is the same as the network error in the browser, even if the operations he can perform are very limited.
My idea here is that under the premise of turning on caching, WebView detects network changes when loading the page. If the user's network is suddenly disconnected when loading the page, we should change the caching strategy of WebView.

ConnectivityManager connectivityManager = (ConnectivityManager)getSystemService(Context.CONNECTIVITY_SERVICE); 
NetworkInfo networkInfo = connectivityManager.getActiveNetworkInfo(); 
if(networkInfo.isAvailable()) { 
settings.setCacheMode(WebSettings.LOAD_DEFAULT);//网络正常时使用默认缓存策略 
} else { 
settings.setCacheMode(WebSettings.LOAD_CACHE_ONLY);//网络不可用时只使用缓存 
}

Since there is a cache, there must be cache control. Similar to this, we must also establish a cache control mechanism to clear or update the cache regularly or by accepting server notifications.
The third one is to delay loading and executing js
In WebView, the callback of onPageFinished() means the completion of page loading. However, this method will not be triggered until the JavScript script is executed. If the page we want to load uses JQuery, it will not be rendered until the DOM object has been processed and $(document).ready(function() {}) has been executed. and display the page. This is unacceptable, so we need to lazy load Js. Of course, this part is the work of the web front-end.

This article has ended here. For more exciting content, you can pay attention to the Java Tutorial Video column of the PHP Chinese website!

The above is the detailed content of Introduction to WebView loading optimization methods. For more information, please follow other related articles on the PHP Chinese website!