Android webview control's ultimate solution for loading slow web page display speed

In the android client, HTML pages are mixed and displayed. Although the HTML content is loaded and the title is displayed normally, the entire webpage will not be displayed until the last five seconds (or more. I have been studying for a long time, searched many foreign websites, and read the code of phonegap, which has never been solved.

We recommend that you use webview to accelerate webview. getsettings (). setblocknetworkimage (true); blocks image downloads, and sets webview in the onpagefinished event of the browser. getsettings (). setblocknetworkimage (false); uses the delayed loading of images to enable faster display of webpages.

However, the actual logs show that the onpagefinished event of Android is triggered only after the Javascript script is executed. If jquery is used on the page, the DOM object is processed and $ (document). Ready (function () {}) is executed. The page is rendered and displayed after the event is executed. For example

It can be seen that after loading the last JS script, rendering and processing DOM elements took 8 seconds, and then loading external pages by executing the Ajax method took 2 or 3 seconds, the onpagefinished display page is triggered. Then, because setblocknetworkimage (false) is set in the program, external images are loaded. (If this parameter is not controlled, image loading will be downloaded during rendering. In summary, it takes about 10 seconds to open a page due to the processing of JS scripts. The same page is loaded quite quickly on the iPhone, and script execution is triggered only after the page is displayed. (Note: If jquerymobile is used, it will be too slow)

To solve this problem, try to delay the loading of JS scripts in the browser, but the webview control of Android does not have such a parameter. JS scripts cannot be blocked separately. In addition, there is a setblocknetworkloads. After using this function, the asynchronous loading function of similar images cannot be implemented. The pages become light boards and CSS is blocked.

This problem has been plagued for a long time until the setblocknetworkimage will not be released after onpagefinished during the HTML photo wall. As a result, the height and width of the image cannot be obtained during the loading of the image in the JS script, finally, we cleverly pass $ (document ). ready (function () {setTimeout (func, 10)});, the function is successfully run after onpagefinished. So, can I delay loading JS scripts in the same way?

The answer is yes.

I have transformed the interface with a very slow speed. The core js code I use is as follows:

<script src="/css/j/lazyload-min.js" type="text/javascript"></script><script type="text/javascript" charset="utf-8">  loadComplete() {    //instead of document.read();  }   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>

 

It is to mix setTimeout and layzload, so that JS scripts can be executed after onpagefinish.

Final execution results

We can see a significant improvement. It takes less than 2 seconds from onpagestarted to onpagefinished. This time is mainly spent on HTML and CSS rendering. From the interface, it is a transient webpage loading progress bar, displaying the page effects rendered by CSS immediately, and then loading and executing the JS script, display the data to be obtained through Ajax one by one.

In summary, solving the problem of slow loading of webview pages on Android is not a problem for Android programmers, but a problem for Web Front-end engineers. If you use a webview-based Android third-party shell tool (such as phonegap, you can improve the UI response time in this way ).

This solution is released, and we hope that the Web-based client solution can be upgraded to a higher level, so that HTML and native app mashups or pure webapps can achieve better results ......