What exactly is a WebView?

1, define,

Webview is a native system for mobile APP Embed Web technology, with a high performance WebKit core browser built in.

This is typically packaged in the SDK as a component called WebView.

2, category

Android (Android) : WebView control in SDK;

Apple (IOS, MacOS) : the WebView UIWebView/WKWebView (UIView/NSView); .

3, functionality,

WebView control is powerful, in addition to having general View properties and Settings, but also on THE URL request, page loading, rendering, page interaction for powerful processing.

3. How to interact with App Native?

1.JSBridge

• In IOS, the main use of WebViewJavascriptBridge to register
• In Android, you need to register with addJavascriptInterface

2.schema

4. Webview in wechat applets

The main development language of applets is JavaScript. In applets, the logic layer and the rendering layer are separated and run separately in different threads. The specific operating environment is as follows:

As you can see, the render layer of the applet is also running on the WebView;

5. Why is WebView slow?

The process for ordinary users to access the WebView is as follows:

1. Interaction without feedback
2. A new page is displayed, showing a blank screen
3. The basic frame of the page appears, but there is no data; The page is in loading state
4. The required data appears

So they did the test and here’s what they found

instructions

In the browser, when we enter the address (or even before), the browser can start loading the page. On the client side, the client takes time to initialize the WebView before loading it.

6. How to avoid slow webView loading?

1. Global WebView

Initialize a global WebView standby and hide it when the client starts. When the user visits the WebView, the WebView is directly used to load the corresponding web page and display it

2. Client proxy data request

When the client initializes the WebView, the network requests data directly from Native. When the page is initialized, the data requested by its agent is fetched from Native.

7. Webview performance optimization

• WebView initialization is slow, you can initialize at the same time the first request data, so that the back end and the network do not idle.
• If the back-end processing is slow, the server can be divided into trunk outputs. The front-end also loads static network resources while the back-end computations.
• Script execution is slow, so 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 initialization is slow, it is ready to initialize a good WebView ready to use.
• DNS and links are slow. Try to reuse domain names and links used by clients.
• Script execution is slow, so the framework code can be broken down and executed before the page is requested.

8. How to choose webView and Native?

The embedded WebView should restrict the domain name of the WebView that can be opened, and set up a whitelist for running access. Or give users strong and obvious reminders before opening external links.

Within a client, native’s current main function is to provide efficient and basic functionality; The internal WebView adds some capabilities that are less demanding for performance experience but more demanding for dynamics.

Improving the dynamic capability of the client or improving the performance of WebView are both ways to improve the coverage of App functions.

Various current frameworks, such as ReactNative, Week and wechat mini programs, are all attempts at this trend.

Refer to the link

• Developer.android.com/reference/a…
• Developer.apple.com/documentati…
• Developers.weixin.qq.com/miniprogram…
• zhuanlan.zhihu.com/p/58691238

Write in the last

Recommend a full series of TS tutorials bar. Recent TS in ascension, collect a set of very good tutorial, free to share with everyone www.yidengxuetang.com/pub-page/in…