画出画布要花多少时间？

Question

我知道在HTML5 gamedev中最昂贵的操作之一就是在画布上绘图。但是，在它的外面画图像呢？有多贵？当画布为100×100像素，而我试图在(1000,1000)处绘制图像时，会发生什么？检查sprite坐标以确保它在画布中，会使渲染更高效吗？

Answer 1

在这些测试中，我使用了Google版本21.0.1180.57。

我做了个小小提琴来测试这种情况..。您可以在这里查看：http://jsfiddle.net/Yannbane/Tnahv/。

我做了1000000次测试，这是我得到的数据：

在画布中绘制图像持续了2399毫秒。

在画布外渲染图像持续了888毫秒。

这意味着在画布外画确实需要一些时间，大概是37%的时间才能把它呈现在画布里面。

结论：在渲染之前最好先检查图像是否在画布内。

但是，当然，我想知道有多好.所以我又做了一次测试。当然，这一次，我实现了边界检查，并得到了--它只需3毫秒就能在画布外“呈现”1000000次图像。这比简单地把它呈现在外部要好29600%。

您可以在这里看到这些测试：http://jsfiddle.net/Yannbane/PVZnz/3/。

Answer 2

您需要自己执行此检查，如果图形不在屏幕上，则跳过绘图。

尽管如此，有些浏览器在某些情况下确实会对此进行优化。我在写一篇关于IE9性能分析器的文章时发现，IE9会优化绘制超出界限的图像。要使这种优化工作，转换矩阵可能必须是一致的，而且无论哪种方式，您都不应该依赖浏览器来完成它。

永远都要检查。

编辑:您可以运行这个简单的测试来查看：http://jsperf.com/on-screen-vs-off

看起来Chrome和Safari确实优化了它，至少在简单的情况下是这样，而firefox实际上并不是