HTML5的测试网站GUIMark3

现在分析一个HTML5的测试网站,其推出的benchmark集名字为GUIMark3。先按照作者的介绍看看这些面向HTML5和Adobe Flash的benchmark主要针对那些应用,后文会有i9000(GPU加速/无GPU加速)、Milestone等手机平台的评测。

1. 简介:GUIMark3相对于1年前发布的GUIMark2更加全面(>=200个测试),更加面向Mobile类应用,同时也更为开放。这些测试背后的哲学没有改变,即每个测试都是针对手机类、平板类产品浏览器的某项特性,以期了解机器的实际性能。通过强制设备以60fps的速度渲染每个测试网页,可以保证真实环境下设备也能获得较高的性能。可事实上大多数情况,目前的设备只能以30fps的速度渲染这些网页,因此未来的性能提升空间还很大。目前仅提供基于HTLM5和Flash版本的测试,将来可能提供本地测试。当用户查看源码时可以看出,作者尽可能保证了HTML5和Flash版本的相同,除非两者提供的API不同。

2. 测试环境:选择了几款有代表性的手机和平板做测试,但Android版本太多,所以只能说选择了每款手机能找到的最新固件。至于Android平板,本测试提供3.0和3.1的测试成绩。所有测试都是基于宽为480像素的,这是一个比较运行游戏和网页应用比较好的分辨率。源码全部测试都可以下载。这些测试都是为Mobile开发的,用台式机跑基本都能到60fps。

3. 具体测试举例说明:

  1. Bitmap:Bitmap绘制测试是通过类似雷电的小游戏模拟网页页面滑动的效果。思路很简单,就是push像素。与GUIMark2的bitmap测试不同(GUIMarks2主要针对台式机),本测试是简单的blitting操作,不包含缩放、抗锯齿、旋转以及半像素值合成(half pixel composition)等操作。本测试可以为那些专门开发Mobile网页应用的人提供优化性能的方法。本测试以绝对时间索引图标位置,所以慢的设备不会看到图标移动速度的区别,但会感觉到卡顿。需要指出的是:对于HTML5的网页,当采用另外一个Canvas缓冲原始图片,则能画得更快,所以这里提供打开/关闭缓冲的两个版本HTML5测试。
    1. ps:测试仅仅blit了101个图片元素(没什么特殊渲染),本以为HTML5应该很流畅,结果比较悲剧。而Flash结果就还不错(基本是2倍于HTML5的性能)。
    2. 而HTML5也确实可以受益于Canvas的缓冲,但也不是很明显(5-10%)。
    3. 结果罗列:
      HTML5 HTML5 Cache Flash
      Phones
      Droid X 14.98 15.93 31.7
      Nexus One 16.57 17.86 36.89
      Desire HD 19.6 23.08 43.66
      Atrix 26.47 30.19 32.34
      iPhone 4 14.57 17.24
      Tablets
      PlayBook 10.7 10.68 25.78
      Galaxy Tab *19.17 *19.98 35.99
      Xoom *24.07 *19.66 26.62
      iPad 2 *19.88 *28.01
      Numbers In Frames Per Second
  2. Vector:本次的矢量图像绘制测试比较贴近程序员在真实项目中对API的使用。可以观察HTML5和Flash对复杂的矢量图形填充以及渐变效果的处理性能。
Advertisements

发表评论

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 更改 )

Twitter picture

You are commenting using your Twitter account. Log Out / 更改 )

Facebook photo

You are commenting using your Facebook account. Log Out / 更改 )

Google+ photo

You are commenting using your Google+ account. Log Out / 更改 )

Connecting to %s