通过彩弹测试（Paintball）了解浏览器硬件加速的差异

虽然最现代浏览器目前都已支持硬件加速，但各浏览器之间GPU加速的效果差异却很大。硬件加速，不仅仅是一个复选选项。浏览器如何选择执行硬件加速对Web应用程序的性能和用户体验有直接影响。 为了突显硬件加速在质量和性能上的差异，让我们在IE10平台预览版​​上仔细看看彩弹测试。彩弹测试使用 HTML5 Canvas 模拟射击彩球在墙面上。彩弹测试演示了如何快速射击组成一个完整的场景。许多其他的 HTML5 Canvas 线上性能示例只是衡量如何快速的在屏幕上绘制相同的图像。 彩弹尽可能快的绘制整个场景。在测试结束后您会看到两个数字。第一个是绘制整个场景花费了多少秒，第二个是每分钟发射的彩弹数量。在此测试中，越短的时间内发射的球越多则更好。 测试地址：http://ie.microsoft.com/testdrive/Performance/Paintball/Default.html

彩弹运行的机制 我们希望彩弹测试是绘制任何颜色的彩弹短语的一种通用Web应用程序。为此，在彩弹运行时，根据指定的RGB值以编程方式生成飞溅的油漆颜色。以编程方式处理图像是新兴 HTML5 Web 应用程序的一种常见方案。 彩弹开始绘制一个实心矩形，这是飞溅的油漆颜色。

彩弹使用sprite sheet保存来飞溅的动画帧：

彩弹决定飞溅油漆应该多大，并从sprite sheet中绘制一帧，使用目标的构成方式。这将导致正在绘制的像素掩盖画布当前的内容。

通过在客户端上生成图形，Web开发人员能够创建和下载较少的图像。这是一个以编程方式改变图像颜色的做法。 彩弹是创建在画布上，而不是显示在屏幕上，然后在绘制到主屏幕画布上。 质量的差异 彩弹测试使用了HTML5 Canvas规范中所有浏览器相同的 HTML5 标记。尽管现在所有的现代浏览器都支持这些API，但是质量差异却极为明显。 这里有一个直观的呈现差异对比：

你会发现有以下区别： Chrome 12没有正确的绘制彩漆溅出效果，因为 Chrome 没有按照 HTML5 规范来执行 HTML5 Canvas 组成模式。 Firefox 4渲染场景正确。 IE9和IE10渲染场景正确。 Safari 5 与 Chrome 的彩漆溅出渲染效果差不多。此外，Safari浏览器还不支持WOFF字体。 性能差异 不同浏览器之间的性能差异是非常震惊的。对于本次测试，我们是使用相同的中档配置（Windows 7平台），过去已经使用了一年。下面的浏览器都支持一定程度的硬件加速，详细测试数据如下：

	Chrome 12	Firefox 4	IE 10	Safari 5
测试耗费的秒数 (越低越好)	516.14	100.17	11.35	68.11
每分钟发射的彩弹数量 (越高越好)	10.11	52.11	459.95	76.64

硬件上发生了什么？ 让我们来看看详细的性能数据，当不同的浏览器射击单个彩弹飞溅到屏幕上时，CPU 和 GPU的使用情况。以下是使用Windows性能工具包生成的结果 。 在Chrome 12中你会发现，它射击一个彩弹需要3.7秒。我们可以看到，当彩弹首次出现在屏幕，有很多回落的 GPU 和 CPU 占用率更新。一旦飞溅的效果（如上所述）开始呈现，GPU 和CPU 占用率便有几秒钟处在峰值。此期间，没有屏幕更新，演示似乎冻结。最后，浏览器恢复过来，完成了场景的渲染。

Firefox 4 处理的相当不错，射击一个彩弹为0.550秒。CPU 和 GPU 的占用率在整个动画中相当稳定。虽然随着飞溅效果的呈现，不会增加 CPU 浮动。屏幕更新渲染了19帧。

IE10 渲染场景相当顺利，在最短的时间内 (0.475 seconds) 渲染了最多的帧。从下面图您可以看到，CPU 和 GPU 的占用率是低于Firefox浏览器，屏幕更新也表现的更频繁、更稳定。

Safari 5 性能在 CPU / GPU 的测量数据上具有误导性。虽然GPU的占用率较低，而且屏幕更新表现出频繁的周期性，屏幕上却没有发生什么。这是因为 Safari 告诉 GPU 一遍又一遍地绘制相同的图像。最终，Safari 只在屏幕上绘制了几个图像，然后跳转到最后一帧，没有任何的动画产生。在这段时间，safari 感觉被挂起和失去响应。

上面的图表为单个彩弹飞溅的性能 - 是整个彩弹演示中的一小部分。尽管大多数浏览器可以处理好单个彩弹，当扩展到几十个彩弹时，许多浏览器则表现出困难。例如，Firefox呈现单个飞溅效果相当好（几乎和IE10一样快）。然而，当面临一个完整的高负荷演示体验，Firefox 的性能相比IE10下滑了20%。 下面是总的 CPU 时间、 GPU 时间和跨浏览器的视觉更新（Visual updates）：

CPU占用时间，越低越好

GPU占用时间，越低越好

视觉更新数量，越高越好

总结 浏览器通过完整的硬件加速和完全可操作的实现 HTML5 特性，对于 Web 开发人员和最终用户提供更好的体验。 我们希望通过查看彩弹演示内部，将帮助您更好地了解跨浏览器的不同质量和性能特征，特别是在 HTML5 Canvas和组成模式方面。这是发展图形丰富网络体验的激动时刻！ via：Understanding Differences in Hardware Acceleration through Paintball

标签:IE相关浏览器测试硬件加速PaintballIE Web