原生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的更多相关文章

  1. 提升HTML5的性能体验系列之四 使用原生UI

    原生UI的设计目的 HTML和css有一个优势就是灵活的样式设计.在大多数情况下,我们都应该使用HTML+css来负责UI.但是有些情况下,我们发现HTML+css的UI不满足需求.1. 绝对置顶HT ...

  2. 提升html5的性能体验系列之一避免切页白屏

    窗体切换白屏的现实问题 HTML5的性能比原生差很多,比如切页时白屏.列表滚动不流畅.下拉刷新和上拉翻页卡顿.在低端Android手机上,很多原生App常用的功能和体验效果都很难使用HTML5技术模拟 ...

  3. 提升HTML5的性能体验系列之一 避免切页白屏

    窗体切换白屏的现实问题 HTML5的性能比原生差很多,比如切页时白屏.列表滚动不流畅.下拉刷新和上拉翻页卡顿.在低端Android手机上,很多原生App常用的功能和体验效果都很难使用HTML5技术模拟 ...

  4. 提升html5的性能体验系列之三流畅下拉刷新

    下拉刷新 为实现下拉刷新功能,大多H5框架都是通过DIV模拟下拉回弹动画,在低端android手机(Android4.4以下)上,DIV动画经常出现卡顿现象(特别是图文列表的情况).解决方案还是web ...

  5. 提升HTML5的性能体验系列之三 流畅下拉刷新和上拉

    下拉刷新 为实现下拉刷新功能,大多H5框架都是通过DIV模拟下拉回弹动画,在低端android手机(Android4.4以下)上,DIV动画经常出现卡顿现象(特别是图文列表的情况).解决方案还是web ...

  6. 提升HTML5的性能体验系列之五 webview启动速度优化及事件顺序解析

    webview加载时有5个事件.触发顺序为loading.titleUpdate.rendering.rendered.loaded.webview开始载入页面时触发loading,载入过程中如果&l ...

  7. 提升HTML5的性能体验系列之二 列表流畅滑动

    App的顶部一般有titlebar,下面是list.常见的一个需求是要在list滚动时,titlebar不动.这个简单的需求,实现起来其实并不简单. 在普通web上的做法是使用div的滚动条,把lis ...

  8. 提升html5的性能体验系列之五webview启动速度优化及事件顺序解析]

    webview加载时有3个事件.触发顺序为loading.titleUpdate.loaded.webview开始载入页面时触发loading,载入过程中如果title已经解析并赋予新值,则触发tit ...

  9. 提升html5的性能体验系列之二列表流畅滑动

    App的顶部一般有titlebar,下面是list.常见的一个需求是要在list滚动时,titlebar不动.这个简单的需求,实现起来其实并不简单. 在普通web上的做法是使用div的滚动条,把lis ...

随机推荐

  1. 关于oracle数据库(6)约束

    约束类型 1.主键primary key(一般是一个表的标志,所以一个表只能有一个主键:主键不能为空,不能重复) 2.唯一键unique(不能重复) 3.外键foreign key 4.检查约束che ...

  2. Shell脚本常用判断

    -e filename 如果 filename存在,则为真 -d filename 如果 filename为目录,则为真  -f filename 如果 filename为常规文件,则为真 -L fi ...

  3. Codeforces Round #375 (Div. 2)A. The New Year: Mee

    A. The New Year: Meeting Friends time limit per test 1 second memory limit per test 256 megabytes in ...

  4. POJ 3548 Restoring the digits

    暴力搜索.注意题目说每个字母对应的数字不同,这句话表明最多只有10个字母,所以暴力DFS绝对不会TLE. #include<cstdio> #include<cstring> ...

  5. 使用Common.Logging与log4net的组件版本兼容问题

    引用:  http://www.cnblogs.com/shijun/p/3713830.html 近期使用了Common.Logging的ILog接口做日志接口,同时利用其log4net适配器与lo ...

  6. MFC中spin control使用

    1.绑定spin和edit m_Spin.SetBuddy(GetDlgItem(m_Edit1)); m_Spin.SetRange(0,100); 2.实现数值的增减 双击控件添加消息 void ...

  7. Ajax应用-Ajax传输JSON数据实例

    ———————————————————— <script type="text/javascript">            var client;          ...

  8. document.domain的修改问题

    有时候,需要修改document.domain. 典型的情形:http://a.xxx.com/A.htm 的主页面有一个<iframe src="http://b.xxx.com/B ...

  9. first os

    Make your first OS. (MikeOS). check out here

  10. STM32的外部中断配置及使用

    STM32的外部中断配置及使用 配置1:GPIO: 配置外部中断为输入模式: 配置2:EXTI: 配置外部中断线和触发模式: 配置3:NVIC: 配置外部中断源和中断优先级: 需要注意的是:RCC_A ...