Html5 canvas 如何调试HTML5 canvas pixi.js性能？
我已经在pixi.js上做了一个简单的测试，它应该运行得很顺利，但是没有。因为游戏很大，有很多元素，我不知道瓶颈在哪里。我认为的某些部分存在bug，导致大量资源使用 我想学习如何识别我编写的占用大量资源的函数的方法 当我使用默认的chrome工具时，它们从不显示我编写的代码部分，而是始终显示库代码 这对我没有帮助，我想知道我编写的哪些函数被多次调用并占用了大量资源 我有什么办法可以做到这一点 这里是我们的代码没有最小化的地方 放大 为了最大限度地利用性能监视器，您必须放大时间线并研究代码的小部分 下图显示了时间线的部分，以及调用树对这一小部分时间的表示 找到单个帧 然而，这仍然是太多的信息。向右放大以查找运行时间较长（超过16ms）的单个帧 使用图形调用树（打开折叠Html5 canvas 如何调试HTML5 canvas pixi.js性能？,html5-canvas,pixi.js,Html5 Canvas,Pixi.js,我已经在pixi.js上做了一个简单的测试，它应该运行得很顺利，但是没有。因为游戏很大，有很多元素，我不知道瓶颈在哪里。我认为的某些部分存在bug，导致大量资源使用 我想学习如何识别我编写的占用大量资源的函数的方法 当我使用默认的chrome工具时，它们从不显示我编写的代码部分，而是始终显示库代码 这对我没有帮助，我想知道我编写的哪些函数被多次调用并占用了大量资源 我有什么办法可以做到这一点 这里是我们的代码没有最小化的地方 放大 为了最大限度地利用性能监视器，您必须放大时间线并研究代码的小部分
mainmainrequestAnimationFramerequestAnimationFrame要找到你的瓶颈，你必须放大慢镜头。帧变慢可能有许多不同的原因。我正在努力寻找这些原因。使用这种方法，我基本上能够看到库或其他占用空间的函数。但是我无法调试我的代码。它几乎没有显示我的代码。也许是因为我不明白它是怎么工作的。这里是动画帧。粉红色的是我的代码。当我放大时，它是这样的：所有这些紫色代码都是因为我的cardAnimation函数而运行的，还是它们是分开的？我如何知道所有这些函数都在做什么并减少它们：