Detailed explanation of WebView knowledge points

What is WebView

WebView is a high-performance webkit kernel browser built into the mobile phone, in SDK A component encapsulated in . There is no address bar or navigation bar provided, WebView simply displays a web interface. It is often used in development.

ps: For an introduction to WebView, you can read here "Talk about the use of WebView"

Although WebView is something designed in Android development, as a front-end developer, pay attention to Some related things are still necessary.

Performance issues

WebView is the underlying SDK## in the development of native APP #, there must be performance problems, the most intuitive feeling is that it is slower than the native one.

APP When opening a page, there are the following stages.

1. WebView initialization (page does not respond)

2. Establish connection, receive data, data initialization (page does not respond--blank)

3. Page rendering, page loading (page loading)

4. Display page (page display)

As shown in the picture:

WebView initialization

APP There is a difference between loading a web page and loading it with a browser. Browsing When the browser is opened for the first time, the browser kernel is started, and when APP loads a web page for the first time, it first creates a WebView instance.

Analysis

During the

WebView initialization period of APP, it will be roughly divided into the following processes

First initialization: After the client is cold started, open it for the first time

WebView, from the creation of WebView to the establishment of network connection.

##Second initialization: After opening

WebView

Afterwards, exit WebView and reopen it.

Conclusion

As a front-end development engineer, the opening time of the statistics page starts with the network connection. As a starting point. However, the opening time experienced by users in

WebView

will be 70~700ms.

So the reason for this result is:

In the browser, when we enter the address (or even before), the browser can start loading the page.
On the client side, the client needs to spend time initializing
2. WebView

   before starting to load.

During this period, because

WebView

does not exist yet, all subsequent processes are completely blocked. Optimization

Since this process occurs in

native

's code, it cannot be optimized solely by relying on the front-end code; most solutions involve collaboration between the front-end and the client. Complete, here are several solutions that have been adopted by the industry. Global WebView

Method:

When the client first starts, initialize a global

WebView

for use and hide it; When the user visits

WebView

, use this WebView directly to load the corresponding web page and display it.

This method can effectively reduce the first opening time of

WebView

in App. When the user accesses the page, there is no time to initialize WebView. Of course this also brings some problems, including:

Extra memory consumption.
Jumping between pages requires clearing the traces of the previous page, which makes it easier to leak memory.

[Refer to Neusoft Patent - Method and Device for Loading Web Pages CN106250434A]

Client Agent Data Request

Method:

While the client initializes
• WebView

  , the network request data starts directly from native;

After the page initialization is completed, obtain the data requested by its proxy from
• native

  .

Although this method cannot reduce the

WebView

initialization time, the data request and WebView initialization can be carried out in parallel, and the overall page loading time is Shortened; shortened the overall page loading time:

[Refer to Tencent Sharing: More than 70% of the business is developed by H5. How to optimize and evolve the architecture of mobile QQ Hybrid? 】

There are various other optimization methods. I will not list them one by one. They all focus on two points:

Pre-initialize before use. Good
1. WebView

   , thus reducing time consumption.

While initializing,
2. Native

   is used to complete some network requests and other processes, so that WebView initialization does not completely block subsequent processes.

WebView Performance Optimization Summary

In the process of loading a web page, native, network, back-end processing, and CPU will all participate, and each has necessary work and dependencies; allowing them to process each other in parallel instead of blocking each other can make the web page load faster:

• WebView Initialization is slow, you can request data first while initializing , let the backend and network not be idle.

• The back-end processing is slow, so the server can be output in separate trunk. While the back-end is calculating, the front-end also loads network static resources.

• If the script executes slowly, let the script run at the end without blocking page parsing.

• At the same time, reasonable preloading and precaching can reduce the bottleneck of loading speed.

• WebView If initialization is slow, just initialize a WebView for later use.

• DNS and the link are slow, find a way to reuse the domain name and link used by the client.

• The script execution is slow. You can split the framework code and execute it before requesting the page.

You don’t need to know too much about WebView in front-end development. I personally think that the above basic understanding of the general process is enough. Of course, aboutWebView The content is more than that.

The above is the detailed content of Detailed explanation of WebView knowledge points. For more information, please follow other related articles on the PHP Chinese website!