提升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的更多相关文章
- 提升HTML5的性能体验系列之四 使用原生UI
原生UI的设计目的 HTML和css有一个优势就是灵活的样式设计.在大多数情况下,我们都应该使用HTML+css来负责UI.但是有些情况下,我们发现HTML+css的UI不满足需求.1. 绝对置顶HT ...
- 提升html5的性能体验系列之一避免切页白屏
窗体切换白屏的现实问题 HTML5的性能比原生差很多,比如切页时白屏.列表滚动不流畅.下拉刷新和上拉翻页卡顿.在低端Android手机上,很多原生App常用的功能和体验效果都很难使用HTML5技术模拟 ...
- 提升HTML5的性能体验系列之一 避免切页白屏
窗体切换白屏的现实问题 HTML5的性能比原生差很多,比如切页时白屏.列表滚动不流畅.下拉刷新和上拉翻页卡顿.在低端Android手机上,很多原生App常用的功能和体验效果都很难使用HTML5技术模拟 ...
- 提升html5的性能体验系列之三流畅下拉刷新
下拉刷新 为实现下拉刷新功能,大多H5框架都是通过DIV模拟下拉回弹动画,在低端android手机(Android4.4以下)上,DIV动画经常出现卡顿现象(特别是图文列表的情况).解决方案还是web ...
- 提升HTML5的性能体验系列之三 流畅下拉刷新和上拉
下拉刷新 为实现下拉刷新功能,大多H5框架都是通过DIV模拟下拉回弹动画,在低端android手机(Android4.4以下)上,DIV动画经常出现卡顿现象(特别是图文列表的情况).解决方案还是web ...
- 提升HTML5的性能体验系列之五 webview启动速度优化及事件顺序解析
webview加载时有5个事件.触发顺序为loading.titleUpdate.rendering.rendered.loaded.webview开始载入页面时触发loading,载入过程中如果&l ...
- 提升HTML5的性能体验系列之二 列表流畅滑动
App的顶部一般有titlebar,下面是list.常见的一个需求是要在list滚动时,titlebar不动.这个简单的需求,实现起来其实并不简单. 在普通web上的做法是使用div的滚动条,把lis ...
- 提升html5的性能体验系列之五webview启动速度优化及事件顺序解析]
webview加载时有3个事件.触发顺序为loading.titleUpdate.loaded.webview开始载入页面时触发loading,载入过程中如果title已经解析并赋予新值,则触发tit ...
- 提升html5的性能体验系列之二列表流畅滑动
App的顶部一般有titlebar,下面是list.常见的一个需求是要在list滚动时,titlebar不动.这个简单的需求,实现起来其实并不简单. 在普通web上的做法是使用div的滚动条,把lis ...
随机推荐
- 模拟SPI协议时序
SPI是串行外设接口总线,摩托罗拉公司开发的一种全双工,同步通信总线,有四线制和三线制. 在单片机系统应用中,单片机常常是被用来当做主机(MASTER),外围器件被当做从机(SLAVE). 所以,在以 ...
- k个区间相交的段落数 Educational Codeforces Round 4 D
http://codeforces.com/contest/612/problem/D 题目大意:给你n个区间,这n个区间会有相交的部分,如果一个区间相交的部分>=k,那么就把这个区间记录下来. ...
- buffer小解
Buffer代表一个缓冲区,存储二进制数据,是字节流 创建: 创建Buffer有4种方式: 1.new Buffer(size) 以字节为单位创建指定大小的Buffer eg: var buf= ne ...
- Jquery EasyUI datagrid后台数据表格生成及分页详解
由于项目原因,网站后台需要对用户信息进行各种操作,有时还需要进行批量操作,所以首先需要将用户信息展示出来,查了不少资料.发现Jquery EasyUI确实是一个不错的选择,功能强大,文档也比较全面,而 ...
- centos下安装与配置Apache方法
下面以httpd-2.0.55.tar.gz版本为例,介绍Apache在Linux中的安装过程:1.解压和解包安装文件:gzip -d httpd-2.0.55.tar.gztar xvf httpd ...
- Java多线程之~~~使用Exchanger在线程之间交换数据[这个结合多线程并行会有解决很多问题]生产者消费者模型
http://blog.csdn.net/a352193394/article/details/39503857 Java多线程之~~~使用Exchanger在线程之间交换数据[这个结合多线程并行会 ...
- 图像相似度计算之哈希值方法OpenCV实现
http://blog.csdn.net/fengbingchun/article/details/42153261 图像相似度计算之哈希值方法OpenCV实现 2014-12-25 21:27 29 ...
- hdu_1011_Starship Troopers(树形DP)
题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=1011 题意:有N个房间,房间的连通性为树形的,就是说你要占领子结点,必须要先占领 父结点,每个房间有第 ...
- 开源日志系统比较:scribe、chukwa、kafka、flume
1. 背景介绍 许多公司的平台每天会产生大量的日志(一般为流式数据,如,搜索引擎的pv,查询等),处理这些日志需要特定的日志系统,一般而言,这些系统需要具有以下特征: (1) 构建应用系统和分析系统的 ...
- android网络编程之HttpUrlConnection的讲解--实现文件断点下载
1.没有实现服务器端,下载地址为网上的一个下载链接. 2.网络开发不要忘记在配置文件中添加访问网络的权限 <uses-permission android:name="android. ...