我在 pixi.js 上创建了一个game，它非常简单，应该可以顺利运行，但实际上并没有。由于游戏很大并且有很多元素，我不知道瓶颈在哪里。我相信其中的某些部分是错误的，导致大量资源使用。
我想学习如何识别我编写的占用大量资源的函数的方法。
当我使用默认的 chrome 工具时，它们从不显示我编写的代码部分，但总是显示库代码：https://prnt.sc/qiplql。
这对我没有帮助，我想知道我写的哪些函数被多次调用并占用了大量资源。
有什么方法可以做到这一点？
这是我们的debugging server，其中代码未最小化。
【问题讨论】：
标签： html5-canvas pixi.js
要充分利用性能监视器，您必须放大时间线并研究一小段代码。
下图显示了时间线的一部分，以及调用树对那一小部分时间的表示
但是，这仍然是太多的信息。放大以查找运行时间较长（超过 16 毫秒）的单个帧
main）下一张图片显示了一个长帧（25 毫秒）打开折叠main（左侧）将显示调用树的图形表示。
框架以鼠标向上事件触发的长任务开始。在该堆栈的底部，事件花费这么长时间的原因是 DOM 重新计算样式。
样式的重新计算意味着下一个 requestAnimationFrame 回调在脚本之前（重排）和之后（DOM 渲染和合成）有一些额外的包袱，这意味着框架迟到了。
放大requestAnimationFrame没有问题。就像我放大的例子一样，你可以看到图形表示与调用树的关系。我已经绘制了一些连接图形函数调用和调用树中相同调用的线。
要找到您的瓶颈，您必须直接放大慢帧。帧慢的原因可能有很多。
【讨论】：