如何调试HTML5 canvas pixi.js性能？

Question

我在pixi.js上做了一个game，它非常简单，应该可以平稳运行，但不是。由于游戏很大，而且元素很多，所以我不知道瓶颈在哪里。我相信其中的某些部分存在问题，从而导致大量资源使用。

我想学习有关如何识别编写的函数的方法，这些函数占用了大量资源。

[当我使用默认的chrome工具时，它们从不显示我编写的代码部分，但始终显示库代码：https://prnt.sc/qiplql。

这无济于事，我想知道我编写的哪些函数被多次调用并占用了大量资源。

我该怎么做？

这里是我们的debugging server，未最小化代码。

Answer 1

放大

为了充分利用性能监视器，您必须放大时间轴并研究一小段代码。

下图显示了时间轴的这一部分，以及那一小段时间的呼叫树表示

查找单个帧

但是这仍然是太多信息。向右放大以找到一个长时间运行的帧（超过16ms）

使用图形调用树（折叠main）

下一张图片显示了较长的帧（25毫秒）。打开折线main（在左侧）将显示调用树的图形表示。

该帧以鼠标悬停事件触发的漫长任务开始。在该堆栈的底部，事件花费这么长时间的原因是DOM重新计算了样式。

重新计算样式意味着下一个requestAnimationFrame回调在（重排）之前和脚本（DOM渲染和合成）之后有一些额外的负担，这意味着框架要迟到了。

放大requestAnimationFrame没问题。就像我放大的一个示例一样，您可以看到图形表示与“调用树”之间的关系。我画了一些线，将图形函数调用与调用树中的同一调用连接起来。

许多原因

要找到瓶颈，您必须在慢速帧上放大。帧变慢的原因可能有很多。