H5 has the advantages of low development cost, cross-platform and rapid iteration. However, Compared with Native, WebView has certain disadvantages in performance, such as high memory occupancy, scrolling lag, and unsupported image formats in a scenario with a lot of resource loading. To solve these problems, the client can carry out native rendering of pictures and videos and other resources, that is, to achieve the same layer rendering of WebView.

iOS

Realize the principle of

When WKWebView is parsing HTML, it will generate corresponding iOS native controls under WKWebView control according to page DOM elements. In general, the generated native controls have no corresponding relationship with HTML nodes, but in some special cases, some special DOM elements will generate native controls in the corresponding position of the WebView, and the size is exactly the same:

  • CSS properties meet the following requirements:overflow: scroll; -webkit-overflow-scrolling: touch;
  • Elastic scrolling occurs when the child element’s height or width exceeds the DOM’s height or width

Before iOS 13, both conditions need to be met; IOS 13 only needs to meet any of these criteria.

The detailed steps

  1. The front end inserts a div tag with overflow property in the position where native controls need to be inserted in advance, notifies the client of the position and size of the scroll bar.
  2. According to the position and size of the front end, the client traverses under WKWebView to find the UIScrollView corresponding to the DIV tag (the size and location are consistent), saves its object pointer, and allocates an ID to return to the front end;
  3. According to the position and size of the front end, the client traverses under WKWebView to find the UIScrollView corresponding to the DIV tag (the size and location are consistent), saves its object pointer, and allocates an ID to return to the front end;

Gestures problem

Since WKWebView takes over all user action events, native controls cannot respond to user events after being inserted as described above. Special handling of events is required: by reloading the hitTest method of WKWebView, the processing logic of this method takes precedence over events on the web page, and if the web page is not processed, it is passed to the native control.

Android

Realize the principle of

The Chromium kernel supports WebPlugin, a plugin mechanism in the browser kernel, which is mainly used to parse and describe the embed tag. Android side of the same layer rendering is based on the Embed tag and Chromium kernel extension to achieve.

The detailed steps

  1. Create one on WebView sideembedDOM nodes and specify component types;
  2. The Chromium kernel creates oneWebPluginInstance and generate oneRenderLayer;
  3. The Android client initializes a corresponding native component.
  4. The Android client draws the screen of the native component to the one created in Step 2RenderLayerBound by theSurfaceTextureOn;
  5. Tell the Chromium kernel to render itRenderLayer;
  6. The Chromium renderingembedThe nodes are displayed together.

The resources

  • Small procedures of the same layer render principle analysis