iOS7的Bug和缺陷问题汇总+性能测试 - 优设网 - UISDC

iOS7的Bug和缺陷问题汇总+性能测试

2013/10/09 评论区

iOS7问题汇总以及性能测试

iOS7正式版发布以后,我们第一时间进行了HTML5测试。iOS的每个版本我们都保持着高度关注。但是此次得出测试结果让我们颇为失望。国外的一些设计师也在九月份给出了相关的点评《八位优秀设计师评iOS 7:新鲜有余 亮点不足》

尽管iOS7在SVG和JavaScript上的表现令人印象深刻,但是iOS7有很多Bug和缺陷,让人感觉这个”正式版”一点也不”正式”,各种小毛病多得像是测试版一般。很糟糕,所幸的是,没有Android 3浏览器那么糟糕。我们建议HTML5标准暂定更新一段时间,直到iOS7修复了这些问题。

一、iOS7的Bug和缺陷

Max Firtman写过一篇文章,简短的陈述了iOS在网络操作中的一些缺陷—— bugs and quirks in iOS 7’s web runtime. 如果你还没读过这篇文章,那么推荐你阅读一下。iOS7主要有量大缺陷。

第一,WebSQL问题:”使用 WebSQL API ,当创建的数据库大于 5Mb 时,会有DOMException问题。先前的版本,用户许可限制是 50Mb。而此版本 ,容量仅仅是 5Mb ,超过5Mb后,用户将收到许可对话框。尽管用户给予权限占用更多容量,但是用户会对这种反复弹出的对话框感到厌烦,算是个大问题。【根据纽约时报的 tarobomb ,当你首次创建数据库,如果请求容量小于 5Mb,然后想存更多数据(大于 50Mb)时,合适的确认框出现(首次 10Mb,然后 25Mb,最终 50Mb),这样你就能储存超过 5Mb 的数据。】”,这个问题很影响用户体验,继续解决方法。

第二,”保存到主屏幕”(Save to Home Screen)这个功能完全不好用。当4款以上的应用保存到主屏幕上后,该功能的”剪贴板”/存储槽(Save Slots)会进入一种循环复制的状态,必须重启手机才能清空该功能的存储槽。【如果安装超过4个 app ,主屏会发生奇怪的事情,比如一个 webapp 取代了另一个。你会看到同样 webapp 的副本。同一时间打开不同的 webapp 时也发生同样的事情。在你的设备试试访问 】

还有的问题是:

1 外部uri的无法正常打开【webapp 无法打开外部的 URI ,比如 Safari 里的网站,打电话,打开 AppStore 等。任何 URI 都会忽略。】

2 JavaScript对话框被关闭了 【标准的对话框无法使用了,比如 alert, confirm 或 prompt 。】

3 如果你的应用使用了应用缓存(AppCache ),或者你正在通过hash或其他技术管理状态,那么历史对象将不会保存导航历史。【因此 history.back() 将不起作用,history.length 永远是 1 。】

除了这些问题,还有一些设计上的问题。

第一,基于JavaScript的滚动组件,无法隐藏工具栏。

第二,移动版的Safari中移除了”全屏”按钮。如果你的应用布局是绝对定位,那么这是一种限制。 suggested by Andrea Giammarchi 提出了一种变通方法,就是让用户通过操作(比如滑动手势)来复位到全屏。而且一旦进入了全屏,屏幕底部区域附近的任何触摸操作都会调用工具栏,让人感到非常的不方便。

第三,在iOS中,左右滑动的手势一般会引起界面10%的移动,这个手势被当作是前进/后退请求。如果养成了这个手势习惯,用户会想当然的把左右滑动手势和历史记录切换联系到一起。

1 可如果你处在历史记录最前页面怎么办?

2 【在单页 webapp (Safari 内)中,当使用 History API 或者 hash 技术管理应用状态时,此问题相当严重。当用户使用后退手势时,他将看到同一应用的两个图像,可是用户在同一个应用中。当你使用 side-by-side (并排)滚动手势时,比如 Yahoo! 主页,如果用户从边界触发手势(它甚至触发了 touch 事件),可能有使用问题 :当用户手势返回时,手势和回退动画(向右滑)也会跟一些 UI 框架发送冲突,比如 jQuery Mobile 或者 Sencha Touch,两种动画都会渲染(浏览器动画,然后是框架动画)。此外,当前一页在左侧并滚动到特定位置,滑动动画的快照是正常的,但是页面从顶部加载,并未保持原来的滚动位置。没有办法阻止这些手势,因为它们是由 OS (操作系统)或者浏览器自身管理的。】

安卓上的Chrome是最早引入这种操作习惯的浏览器,但是他们根据网页开发者的反馈,删掉了这一特性。我们希望苹果也能马上做出调整。

在我们的测试中,我们发现了iOS7运行时不计其数的Bug:

1 在iPad上浏览时,如果正在切换内容页面时,突然iPad横竖向转变,会出现屏幕渲染问题。

2 重复的运行、退出主屏幕上的同一应用会导致设备锁住,硬件重启才能解决。

3 RAF(Request Animation Frame)动效调用到背景的方式不对,这导致了活动页面RAF动效的效果不佳。这将导致RAF动效的使用大幅减少。

4 在iPad上,横屏的情况下,文档的主体高度设置为100%时,内容会上移20px。可以通过window.scrollTo(0, 0) 来解决。

5 某些情况下,缩放一些层次复杂的物体(比如说3D 物体)会导致错误。位图被拉伸。

6 CSS动效有时候在Z-Index层未计算载入前便触发,也可能是因为Z-Index的问题。

7 使用Web Workers运行的脚本出故障,要么说明原始页面有问题,要么说明Safari处理有问题。不能换标签,也不能缩小Safari,也不能切换,只有停止Workers的运行才能解决问题。这是个严重的问题,同时也降低了整个系统的性能。

二、性能表现

在iPhone5上进行了iOS6.1和iOS7的性能对比,性能有了显著的增长。首先我们利用Javascript计时器进行测试。刚开始的时候结果很一致,都是4ms,性能还不错。但是使用了John Resig’s standard timer test 的方法后,结果变得很奇怪,在4ms和12ms不断跳动,而且噪音比iOS6大。

iOS7 timerFigure 1A: JavaScript timer resolution: iPhone 5/iOS 7
 
iOS6 timerFigure1B: JavaScript timer resolution: iPhone 5/iOS 6

不错,在JavaScript上的表现比以前好了,SunSpider 1.0测试比iOS6.1 快15%。Octane得分比iOS 6.1高70%。Octane测试彻底展现了新系统的速度提升:斯托克斯方程表现提高了4倍,我记得两年前买的MBP 此项纪录是5600——也就是iPhone5+iOS7能达到桌面性能的一半!这里还测试了一些GPU运算能力。对比如下图。

iOS7Figure 2: Octane Benchmark – iPhone 5 iOS 6 vs. iOS 7 (higher is better)

在iOS 7上,用Dromaeo平台进行测试,我们发现DOM交互速度十分缓慢,这很不理想。DOM Query的处理速度仅仅为iOS6的50%。很多HTML5应用都依托DOM Query,所以我觉得下一个版本的更新,要优先解决这个问题。

iOS7Figure 3: Dromaeo benchmark – iOS 6 vs iOS 7 (iOS 6 = 1.00 – higher is better)
 

三、图像表现力

iOS7的图像表现稍有提升

FishtankMindcat测试均比iOS6高10%

SVG的测试结果出乎人意料,多亏了新的算法,SVG路径绘制性能提高了200倍。也就是说比以前快了200倍,在iOS6中10000段SVG路径需要11秒才能绘制出来,iOS7中53ms便可完成,iOS7的速度比Surface RT快六倍。

iOS7Figure 4: SVG Path Drawing Benchmark (lower is better)

 

其他和SVG有关的测试,iOS7的性能也有不同程度的提高。一些SVG过滤器现在可以使用GPU加速——这意味着iOS中将会加入更多的动效。色彩转换(Color Matrix & Color Curves)以及displacementMaps变快了。但是一些复杂的效果,比如光照效果,iOS7运行起来依然缓慢。

结论

这么多的问题和Bug,虽然有几项改进,但是很让人怀疑iOS7的完成度,iOS7正式版有赶工嫌疑——为了配合iPhone 5S.这不禁让我们联想起Android 3刚发行的时候——为了配合Motorola Xoom平板——出现了很多Bug.我们期待iOS7的升级,希望苹果能重视产品的质量。

iOS7需要对HTML5进一步优化,这是大势所趋,同时也能迎合用户的需求。

 

原文地址:
http://www.sencha.com/blog/the-html5-scorecard-the-good-the-bad-and-the-ugly-in-ios7/
参考(文中【】)的部分:
http://jinlong.github.io/blog/2013/09/23/safari-ios7-html5-problems-apis-review/
优设网翻译:@MartinRGB
转摘请注明优设网译文出处,谢谢各位小编。

 
================关于优设网================
“优设网uisdc.com“是一个分享网页设计、无线端设计以及PS教程的干货网站。
【特色推荐】
设计讲座:每月邀请国内互联网公司设计前辈及行业总监在群内及YY语音(YY频道:156982)分享实战经验。
设计微博:拥有粉丝量55万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗?
添加 优秀网页设计 微信号:【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

youshege
 

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/the-html5-scorecard

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

sketch 界面设计 版式设计 排版布局 职场 优设专访 设计师干货 优设大课堂 设计达人 配色 web前端开发 视觉设计 素材下载 AI教程 设计理论 设计流程 神器下载 字体下载 设计师专访 psd下载 设计规范 海报设计 设计趋势 用户体验设计 动效设计 平面设计 logo设计 图标设计 ICON 产品设计 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里