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中完成。