1. What is webKit engine

Before we understand what a WebView is, let’s take a look at what a WebKit engine is, and how the HTML we write on the front end is rendered into a real page by webKit engine.

(Chrome is based on the WebKit engine, Mozilla is based on the Gecko engine, just webKit.)

The first thing to understand is that WebKit is a rendering engine, not a browser, and usually a page can be developed and displayed in the browser, but WebKit focuses on the presentation of web content, of which rendering is one of the core parts.

The rendering part mainly understands the origin and method of building Render tree and RenderLayer tree based on DOM tree.

1.1 So what is DOM?

Simply put, DOM is a structured representation of documents such as HTML or XML. In this way, users can access the relevant attributes of any element in an HTML page by providing a standard interface, and can add, delete, and update DOM accordingly.

For example, the way we use native JS:

  • document.getElementById()
  • Document. The getElementsByTagName (),
  • And CSS selectors document. GetElementsByClassName ()

Based on some visual nodes of DOM tree, WebKit creates corresponding RenderObject nodes according to needs, and these nodes also form a tree, called the Render tree. Based on Render trees, WebKit also creates RenderLayer nodes for some of them as needed to form a RenderLayer tree.

Render trees and RenderLayer trees are the basis for WebKit’s support for rendering, and WebKit relies on them for layout calculations, as well as browser rendering and GPU hardware acceleration.

Here are three different trees in the rendering process with the help of a picture from Baidu:

2. What is webView

2.1 After introducing webKit engine, let’s take a look at what webView is:

Webview is a control based on webKit engine that can parse DOM elements and display HTML pages. It has the same principle as browser display pages, so it can be treated as a browser.

Android Webview has different kernel versions of WebKit in earlier and later versions, and uses Chrome directly after 4.4.

2.1 Where is webView mainly used? Or what are the requirements for using webView?

Personally, when DISPLAYING HTML pages on the computer, you can browse the page by opening the browser, while at the mobile system level, it is impossible to display HTML pages without the support of WebView. Therefore, the function of WebView is to display HTML interface on the mobile system

So it’s mainly needed when you need to load HTML files on the mobile system

2.3 How does a native application invoke an HTML page?

1. Native apps load HTML pages (pages can be loaded in a variety of ways, such as loading locally written HTML files or files placed on the server)

2. After loading, the display is rendered by webView. If the system does not have a Webview, it cannot render and display HTML

In fact, a native application call HTML page process has been completed, so the page is not only displayed, sometimes may also need interaction, here is the need to write some methods, such as HTML interface button needs to call the system native things (such as: take photos, system files, albums and so on). The native side is responsible for maintaining the interface of the HTML call and then returning it as needed (the native side acts as a server and the HTML as a client).

2.4 What are the benefits of using webView?

Native APP is the page layout design, as well as business pack and users to download and install the code to use, and the webview is by loading the HTML files for display of the page, when you need to update the layout of the page or business logic changes, if it is a native APP will need to modify the front content, upgrade package, redistribute can use up to date.

The webView page only needs to modify the HTML code or JS file (if it is obtained from the server, as long as the new file is deployed), and the user can refresh the page again to use the updated one, without downloading and installing the upgrade

2.5 Android Built-in Browser, built-in browser?

Built-in browser and built-in browser are the same concept, right?

Domestic mobile phone built-in browser is not Chrome, mainly due to copyright reasons, built-in browsers are mobile phone manufacturers based on the domestic mainstream several major browsers customized, and then released in their own mobile phone system version. However, several major domestic browser manufacturers such as QQ browser, UC browser, are based on webKit engine

The iPhone comes with Safari, which has webKit at its core

2.6. RN Class React Native WebView difference?

What are the components of the iOS native rendering process? It is mainly divided into the following four steps:

  • Step 1: Update the view tree and layer tree. (Corresponding toViewThe hierarchical structure ofViewOn theLayerHierarchical structure)
  • Step 2: THE CPU calculates what to display in the next frame (view creation, layout calculation, view drawing, image decoding). whenrunloop 在 kCFRunLoopBeforeWaiting 和 kCFRunLoopExitIt notifies the registered listeners, packages the layers, and sends the package data to a separate rendering processRender Server. The previous CPU processes these things collectively calledCommit Transaction.
  • Step 3: Data arrivalRender ServerThen it will be deserialized to get the layer tree. According to the layer order of the layer tree,RGBAValue, the layerframeAfter filtering, turn the layer tree into a render tree. The render tree information is transferred to the layer treeOpenGL ES/Metal.
  • Step 4:Render ServerWill be calledGPU.GPUStart with the aforementioned vertex shader, shape assembly, geometry shader, rasterization, fragment shader, test and mix. After completing these six stages of work, it willCPU 和 GPUThe calculated data is displayed on every pixel of the screen.

2.6.2. WebView:

For WebView rendering, most of the work is done in WebKit. WebKit itself is based on the Lay Rendering architecture of macOS, and iOS itself is based on this architecture. Therefore, the performance of the rendering itself should not differ from that of native in terms of how it is implemented.

But why is it so obvious that WebView rendering is slower than native rendering?

  • First, first load. There will be additional network requests and script parsing. Even with local web page loading,WebViewThere is also more scripting to parse than native.WebViewExtra parsingHTML+CSS+JavaScriptThe code.
  • Second, language interpretation execution performance. JS language parsing performance is weaker than native. Especially when it comes to complex logic and lots of calculations,WebViewInterpretation performance is considerably slower than native.
  • Third,WebViewThe render process is independent, with each frame update passing throughIPC （IPC(Intel – Process Communication,processInter-communication).processIntercommunication refers to twoprocessTo generate interaction between the dataGPUProcess will cause frequentIPCProcess communication, resulting in a performance drain. Also, the two processes cannot share texture resources,GPUNot available directlycontextRasterize, and you have to waitWebViewthroughIPCthecontextTo pass toGPURasterize. soGPUTheir performance will also be affected.

Therefore, WebView rendering is less efficient than native rendering.

2.6.3 React Native (UsedJavaScriptCoreEngine as virtual machine solution)

React Native, Weex, applets, etc.

ReactNative renders iOS renderers directly, but with Json+JavaScript scripting parsing. Use the JavaScriptCore engine to associate “JS” with “native controls”. Furthermore, achieve the goal of controlling iOS native controls through JS. (In a nutshell, this JSON is a scripting to native-language mapping table, where KEY is a scripting language-aware symbol and VALUE is a local-language-aware symbol.)

JavaScriptCore: JavaScriptCore is a bridge between iOS native and JS. It was originally the engine that explains executing JavaScript code in WebKit. Currently, apple has a JavaScriptCore engine and Google has a V8 engine.

However, RN, like WebView, also faces the problem of JS interpretation performance.

Therefore, WebView < class ReactNative < native in terms of rendering efficiency. (Because JSON is less complex than HTML + CSS)

2.7 Is the page displayed by APP WebView the same as the page opened by mobile browser?

Both ios and Android have their own browsers based on WebKit at the bottom, and then have WebView controls in their systems, which are also based on the WebKit engine, so the effect is the same whether you call webView to display HTML pages through APP or open HTML pages in the browser.

The above is to learn some knowledge points about Webview. Learning on the shoulders of giants 👇🏻 :

The learning link is as follows: ❤

IOS on GPU and “App rendering process”

WebView performance, experience analysis and optimization

Are you really familiar with WebView? Not until you see it

Optimize wWebView solution:

Full WebView optimization dry goods, so that your H5 seconds to realize the experience

I am Jingda, a front-end primary school cub. I hope to learn and progress together with you. 🙆 🙆 🙆

Come on! Wx: LJ18379991972 Welcome to 👏🏻

There must be something wrong with this article, point it out in the comments section ❤