以HTML5为衡量尺度：iOS7的好，坏，丑

iOS7正式版发布以后，我们第一时间进行了HTML5测试。iOS的每个版本我们都保持着高度关注。但是此次得出测试结果让我们颇为失望。尽管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大。

Figure 1A: JavaScript timer resolution: iPhone 5/iOS 7

Figure1B: 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运算能力。对比如下图。

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

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

Figure 3: Dromaeo benchmark - iOS 6 vs iOS 7 (iOS 6 = 1.00 - higher is better)

三、图像表现力

iOS7的图像表现稍有提升

Fishtank 、Mindcat测试均比iOS6高10%

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

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

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

不过特例也是有的Animating 500 SVG circles iOS6上50帧，iOS7上动效运行了几帧后就停住了。

              结论

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

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

注：

1 原文地址：

http://www.sencha.com/blog/the-html5-scorecard-the-good-the-bad-and-the-ugly-in-ios7/

2 类似参考：

http://jinlong.github.io/blog/2013/09/23/safari-ios7-html5-problems-apis-review/