Webview of Android

Reposted from: http://chroya.javaeye.com/blog/667116. Thank you, chroya!

Certificate -----------------------------------------------------------------------------------------------------------------------------------------------------

Recently, many projects use webview and web pages for layout. Android's webview is based on the WebKit kernel, but its running effect is exactly the same as that on Firefox. Therefore, when writing it, It is tested with Firefox first, and the test is OK and then put it in the program to see the effect, basically, there is no problem. In fact, Android webview is similar to iPhone webview, and iPhone webview is much more powerful than Android.

Let's talk about some achievements of webview:

 

1. Loading resources is not slow, but when there are too many resources, it will be slow. For images, CSS, JS, and HTML resources, every 10-200 ms is required. Generally, it is OK after 30 ms. If there are many resources on a page, it is a waste of time.

 

Ii. execution speed of JS and CSS. At the beginning, my pages all use js to generate Dom and add styles. It took 5-6 seconds to load a page. Then I doubt whether the execution efficiency of JS is not high, and then I will use CSS in all the places where CSS can be used. Anything that can be directly written to HTML does not need to be dynamically generated by Js. As a result, the speed is not greatly improved, and the maximum increase is 1 second. It seems that JS execution speed is not as slow as CSS, but it is not as slow as that. What makes page loading so slow? After careful troubleshooting, I found that I used the jquery framework.

The order in which webview loads pages is as follows: first load HTML, then parse the CSS, JS files, and dead image resources written on the page from it for loading. If there is a cache in WebKit, do not load. After these resources are loaded, CSS rendering and JS execution are performed. CSS rendering generally does not take a long time. It takes dozens of milliseconds to complete. The key is JS execution. If jquery is used, the execution takes 5-6 seconds. During this time, if the background is not set in webview, the webpage is white and ugly. This is a bad user experience. Therefore, if you use a web page layout program, it is best not to use a large JS framework.

 

3. Intercommunication between webpages and Java. This feature is available on the iPhone. There is a lot of information on the Internet to tell us how to do it. These are very simple and basic. After studying for a while, I will summarize the following:

1. Java calls the functions in JS at an unsatisfactory speed. It takes about 100 or 200 milliseconds at a time. If you want to do something highly interactive, this speed will make you crazy. In turn, it is different. js calls Java methods at a very fast speed, basically 40-50 milliseconds. Therefore, use js to call Java methods instead of Java to call JS functions.

2. Java calls JS functions without returning values. js can return values when calling Java methods. The returned value can be a string or an object. If it is a string, there is a very annoying problem. I will talk about it at 3rd. If it is an object, this object will be converted to a JS object and can directly access the methods in it. However, I do not recommend that Java return objects to JS unless required. Because JS receives the objects returned by Java, it will generate some exchange objects. If the number of these objects increases to 500 or more, the program will have problems. Therefore, try to return the basic data type or string.

3. js calls the Java method. If the returned value is a string, you will find that the string is native and cannot modify it. For example, if you want to substr it, you cannot obtain it. How can this problem be solved? Convert to locale. Use the tolocalestring () function. However, this function is not fast. If many strings are converted, it will take a lot of time.

 

 

 

4. Drag elements on the webpage. There is a div on the webpage and you want to drag it to another place. How can this problem be solved? If you use web pages on a PC, you can listen to onmousedown, onmousemove, and onmouseup. But on mobile phones, the event model is different. Click, drag, and release on the webpage. When the mobile phone leaves the screen, webview triggers onmousedown, onmousemove, and onmouseup events. Therefore, you cannot do this if you want to drag it. This problem had plagued me for a long time. Later I found that the practice on the iPhone was solved. The webview on the iPhone has event ontouchstart, ontouchmove, and ontouchend designed for touch screen. The response of these events is real-time, and the drag problem can be solved.

 

5. Some minor issues. If the webpage in webview has input, it needs to be input, but it does not respond when clicked. The input method cannot be used. This is because webview does not obtain the focus. You need to set requestfocus () for webview in Java.

 

6. Differences between webview on Android and webview on iPhone. So far, I have found several differences:

1. on Android, webview does not support multi-touch, and there are no ongesture series events, whereas on iPhone.

2. The webview on Android does not support transparency. It can be used on the iPhone.