canvas渲染性能分析

Question

我正在开发由块组成的等距 3D 环境的渲染（我的世界的一种）。

我正在使用它的 2d 上下文在画布中绘制它（并做一些数学运算）。

在页面加载时会创建一个循环，每帧添加一些块 (window.requestAnimationFrame(fn))，但我在渲染时遇到了低 fps 的问题。

这是我第一次如此深入地进行性能分析，我正在努力理解 Chrome Devtools 的性能视图。

看结果：

我的理解是该帧需要 115.9 毫秒才能完成，但查看过程似乎只需要大约 30 毫秒就可以使用画布 API 进行计算，但在任务栏中（在 Animation Frame Fired ) 我看到完成框架的时间要长得多。

这是一种常见的行为吗？我是否犯了一些愚蠢的错误，以某种方式浪费了性能？
（如果是常见的行为，那期间发生了什么？是实际的绘图吗？）

我阻止了，因为我想知道是否应该尝试改进我的绘图算法，或者我应该寻找其他地方来解决瓶颈

Answer 1

我不知道你是否得到过这个问题的答案，但我突然想到的一件事是，在你的屏幕截图中，绿色的“GPU”栏几乎是实心的。据我了解，此栏表示浏览器正在向 GPU 发送指令和/或数据以进行硬件加速渲染。根据我的经验，如果您使用速度较慢的显卡，这可能是个问题，具体取决于您要执行的操作。

好消息是，我希望在更强大的系统上进行测试能够立即提高帧率。坏消息是，我不确定如何准确判断哪些画布操作在您的（坏）GPU 上施加了如此多的负载，或者如何优化以减少 GPU 流量。