Improve HTML5 performance Experience series four using native UI

The native UI is designed to be nativeui

One of the advantages of HTML and CSS is the flexible style design.
In most cases, we should use HTML+CSS to be responsible for the UI. In some cases, however, we find that Html+css's UI does not meet the requirements.
1. Absolutely sticky
Elements such as the HTML video, as well as native elements such as map 5+, have higher levels of native controls than Div.
For some controls that pop up that need to be pinned, the control that causes the div mode cannot be absolutely pinned, just as the div that pops up in web development is obscured by flash.
The following popup controls were developed using div: alert, confirm, Actionsheet, waiting, date, time, prompt, toast, all with this problem.
To do this, html5+ extends the above Nativeui controls to ensure that they are absolutely pinned.
2. Cross-WebView
If the interface uses the Tab tab of the WebView mode, but wants to pop a menu actionsheet from the bottom, the popup menu using div mode cannot cross webview because it can only see part of it.
At this point you need to use the Actionsheet in Nativeui to cross WebView.
3. Full Screen Mask
When you eject a control, you need to shadow-mask the rest of the entire screen.
With Div masks, it is also not possible to mask native controls such as video, map, or cross WebView.
The native mask can also cover the top status bar of the phone, which is not available in div masks.
html5+ extends the Nativeui control to ensure full-screen masking.

Native UI is the Nativeui feature

To solve these problems, the html5+ specification encapsulates the NATIVEUI specification. Reference: http://www.html5plus.org/#specification #/specification/nativeui.html

The Nativeui features are:
1. Never worry about being obscured by other native controls
2. Can be displayed across WebView
3. Full screen mask to ensure that other parts of the phone screen are in a gray state
4. Native style and high performance experience
Nativeui is characterized by invoking the OS's UI controls to ensure consistency with the native experience.
OS is a different design style on iOS6, ios7+, Android2.3, android4.x, and ANDROID5, but the pop-up box is consistent with the current OS style.
and native controls are shown to perform more efficiently than DIV+CSS.

Limitations of Nativeui

There is also a disadvantage to div+css,nativeui compared to the poor customization.
Developers cannot use CSS to decorate the styles of these pop-up controls, which are long and can only grow in the same style as the native OS.
So you can also use DIV+CSS to make pop-up controls when you need to personalize the design of the controls and don't care about the absolute top, cross-webview, full screen masks.

Encapsulation of the MUI framework

Unlike the Nativeui all-native, MUI also complements the popup controls that encapsulate some div styles.
MUI supplements provide a DIV-mode actionsheet, PopOver, which can be used when the nativeui encounters a limit.

Eject translucent WebView, universal but consumes memory

Sometimes we find that the Nativeui pop-up does not meet the needs of customization, and the div style popup controls are not absolutely sticky.
At this point there is also a way to consume more memory, that is, simply pop up a translucent webview.
WebView can be set to the top of the Webviewstyle object, you can set the width of the zindex, you can set the mask, you can set the transparency.
You can customize the interface in WebView, and then use the WebView Evaljs method to do the form communication between WebView and return the result.

Improve HTML5 performance Experience series four using native UI