Chrome Mobx如何获得更好的性能配置文件信息?

zz2j4svz  于 2023-06-19  发布在  Go
关注(0)|答案(2)|浏览(130)

我正在尝试使用Chrome检查器性能选项卡分析和优化mobx应用程序。下面有一个屏幕截图。

此堆栈跟踪中的许多信息都是误导性的,没有帮助,因为它指向内部mobx函数,如trackDerivedFunction。因为mobx @computeds依赖于get helper,所以可以看到堆栈底部的跟踪是对get的多次调用,没有多少有用的信息。其中一些确实链接到我代码中的实际函数,但是一些链接到更多的内部mobx。
你可以看到有很多对endAction的调用,有什么方法可以显示这是什么操作吗?我正在寻找任何其他mobx插件或devtools的建议,以帮助这一点。

vsmadaxz

vsmadaxz1#

Mobx间谍工作相当不错的跟踪什么行动被触发。
https://mobx.js.org/refguide/spy.html

mo49yndu

mo49yndu2#

这个堆栈跟踪中的很多信息都是误导和无用的,因为它指向内部的mobx函数,如trackDerivedFunction。
为什么这会是误导和无益的呢?这是正在运行的代码。很明显,你不能在这个图表中包含100%的代码,它必须跳过较短的代码。它动态地决定这一点。
Flamecharts没有区分各种来源。它们只是跟踪函数运行了多长时间,如果合理的话,就会显示出来。
如果图表包含了您想要的所有信息,它甚至不会正确显示,因为它将有数千个,如果不是数百万个,微小的项目。
你可以看到有很多对endAction的调用,有没有什么方法可以显示这是什么动作?
以下几个简单的方法来实现这一点:

  • 在该函数中放置一个断点并检查范围值。这应该可以很容易地告诉您正在执行哪个操作。图表上项目对应的文件始终在下面的**摘要页签中。
  • 修改node_modules以插入**console.log**。如果函数被多次命中,这可能更实用。
    *放大图表。也许你可以看到哪个派生函数花了这么长时间,因为仍然有低于trackDerivedFunction的项。
    *人为地让代码运行时间更长:如果你知道有什么东西被击中,但它只是不显示(它允许异步),你可以插入一个函数,让它休眠一秒钟左右,你一定会找到它。另一种选择是插入一个confirm,它将阻塞所有内容,因此肯定会使代码块在图上可见。

相关问题