画布渲染性能分析

Question

我正在开发由块（类似于我的世界）组成的等距3d环境的渲染。

我正在使用其2d上下文在画布上进行绘制（并进行一些数学运算）。

在页面加载时，会创建一个循环，每帧添加一些块（window.requestAnimationFrame(fn)），但是渲染时我的帧速很慢。

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

查看结果：

我了解的是，完成框架花费了115.9ms，但是看一下这些过程，似乎似乎只需要30ms就可以使用canvas API进行计算，但是在任务栏中（在 Animation Frame Fired上） ）我认为框架完成所需的时间更长。

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

我想知道是否应该尝试改善绘图算法，还是应该寻找其他地方解决瓶颈问题，所以我封锁了

Answer 1

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

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