Canvas fillStyle性能

Question

我正在检查我的游戏将用尾迹效果执行多少。 但我注意到的是我每秒获得更多操作。 这怎么可能？

这怎么样...

    context.fillRect(0, 0, 500, 500); // clearing canvas without any trail effect

......比这慢？

    context.fillStyle = 'rgba(255, 255, 255, 0.1)'; // clearing canvas with trail effect
    context.fillRect(0, 0, 500, 500);

链接到测试： http ： //jsperf.com/canvas-trailing-effect

Answer 1

我想这里有一点初始化问题：在每个测试循环之间不重置画布填充样式。

在调用fillRect之前设置fillstyle，您将看到具有黑色的fillRect更快，正如预期的那样。

还要记住clearRect可以更快地清除画布。

我更新了你的性能测试：

http://jsperf.com/canvas-trailing-effect/2

编辑：我很想知道几个电话的开销，所以我编辑了性能测试，看看时间是3/10/20步。

所以我们在FF（mac OS / imac）上：

3步：1/12000 = 83 ns = 3 *开销+填充时间10步：1/8000 = 125 ns = 10 *开销+填充时间20步：1/5000 = 200 ns = 20 *开销+填充时间

所以我们的开销接近6 ns，填充时间接近60 ns。

所以公式大约是时间=步数* 6 +（填充比率）* 60
50％的90 ns填充十步。

这种计算应该在几个浏览器/设备上完成，以便更加相关。

此测试也将受益于在rAF内完成。