提升html5的性能体验系列之四使用原生ui

标签：

原生UI即nativeUI的设计目的

HTML和css有一个优势就是灵活的样式设计。
在大多数情况下，我们都应该使用HTML+css来负责UI。但是有些情况下，我们发现HTML+css的UI不满足需求。
1. 绝对置顶
HTML的video等元素，以及5+的map等原生元素，这些原生控件的层级高于div。
对于一些弹出的需要置顶的控件，会造成div模式的控件无法绝对置顶，就像在web开发里弹出的div被flash遮住一样。
使用div方式开发的如下弹出控件：alert、confirm、actionSheet、waiting、date、time、prompt、toast，都存在这个问题。
为此，HTML5+扩展了上述nativeUI控件，保证可以绝对置顶。
2. 跨webview
如果界面使用webview方式的tab选项卡，但想从底部弹出一个菜单actionsheet，此时使用div方式的弹出菜单由于无法跨webview，只能看到一部分。
此时就需要使用nativeUI里的actionsheet才能跨webview。
3. 全屏遮罩
弹出控件时，需要对整个屏幕的其他部分做阴影遮罩。
使用div遮罩，同样无法蒙住video、map等原生控件，也无法跨webview。
而且原生的遮罩还可以蒙住手机顶部状态条，这都是div遮罩做不到的。
HTML5+扩展的nativeUI控件，保证可以全屏遮罩。

原生UI即nativeUI的特点

为解决上述问题，HTML5+规范封装了nativeUI规范。参考：http://www.html5plus.org/#specification#/specification/nativeUI.html

nativeUI的特点有：
1. 绝对置顶，不担心被其他原生控件遮挡
2. 可以跨webview显示
3. 全屏遮罩，保证手机屏幕其他部分处于蒙灰状态
4. 原生样式及高性能体验
nativeUI的特点是，调用OS的UI控件，确保和本机体验一致。
在iOS6、iOS7+、Android2.3、Android4.x、Android5上，OS是不同的设计风格，但弹出框和当前OS风格一致。
并且原生的控件展示，比div+css的方式执行效率更高。

nativeUI的局限性

相比div+css，nativeUI也有一个缺点就是可定制性差。
开发者无法使用css修饰这些弹出控件的样式，它们长的、且只能长得和本机OS的风格一样。
所以在需要个性化设计控件且不在意绝对置顶、跨webview、全屏遮罩这些问题时，也可以使用div+css方式制作弹出控件。

mui框架的封装

与nativeUI全原生不同，mui同时也补充封装了一些div方式的弹出控件。
mui补充提供了div方式的actionSheet、popover，可以在nativeUI遇到限制时使用。

弹出半透明的webview，万能但消耗内存

有时我们发现nativeUI弹出的东西没法满足定制需求，而div方式的弹出控件又无法绝对置顶。
此时也是有办法的，就是多消耗点内存，即干脆弹出一个半透明webview。
webview的WebviewStyle对象中可以设置zindex来置顶，可以设置高宽，可以设置遮罩，可以设置透明度。
在webview里可以随便自定义界面，然后通过webview的evaljs方法做webview之间的窗体通讯并返回结果

提升html5的性能体验系列之四使用原生ui

标签：

原文地址：http://www.cnblogs.com/susanws/p/5420721.html