javascript - 如何使用 Xcode/Instruments/Time Profiler 分析 React Native 源代码

Question

我们正在使用 React Native 0.59.10 和 React-Redux 5.0.7，并且遇到了 CPU 限制的性能问题，其中我们的 Redux 操作大约需要 0.25 秒才能完成。

我们已使用 Instruments 中的 Time Profiler 配置进行分析，但我们的 JS 代码均未符号化。

在 Chrome 中进行远程调试似乎只是调试“远程检查器”页面，这完全没有帮助。

有没有办法构建/附加源映射，或将下面看到的内存地址符号化到 JS 函数名称/调用？

Answer 1

Firefox Profiler

了解 Firefox Profiler

The Firefox Profiler has more current documentation available at profiler.firefox.com/docs/. However the following could have some potentially useful information for Gecko-specific problems.

您可以查看有关 Firefox Profilers 的一些常见问题。

报告性能问题提供了根据 Firefox 开发人员的要求获取配置文件的分步指南。

<强>1。时间轴

时间线有几行跟踪标记(彩色片段)，指示有趣的事件。将鼠标悬停在它们上方可查看更多信息。跟踪标记下方是与各种线程上的事件相对应的行。

Tip: Threads that are annotated with "[default]" are in the parent (aka "UI", aka "browser chrome", aka "main") process and those annotated with "[tab]" are in the Web content (aka "child") processes.

Tip: Long-running tasks in the parent process will block all input or drawing with the browser UI (aka "UI jank") whereas long-running tasks in the content process will block interactivity with the page but still allowing the user to pan and zoom around thanks to APZ.

追踪标记

红色:这表明事件循环没有响应。请注意，此处不包括垂直同步等高优先级事件。另请注意，这表明如果有一个事件正在等待，将会发生什么，而不一定是有一个事件等待那么长时间。

黑色:这些表示同步 IPC 调用。

<强>2。调用树

调用树显示按“运行时间”组织的示例，它将按挂钟时间显示数据。树元素右侧有浅灰色名称，指示代码的来源。请注意，元素可以来自 JavaScript、Gecko 或系统库。请注意，如果某些函数尚未正确命名，则符号化可能尚未完成。

Tip: You can right-click on a function name to get an option to copy its name to the clipboard.

<强>3。分享个人资料单击“共享...”> 共享，确认您打开的 URL 和您的 Firefox 扩展将包含在发送到服务器的配置文件数据中。如果您选择不同的时间范围，按“永久链接”显示的 URL 将发生变化，以便您可以确保 URL 的接收者将看到与您所看到的相同的内容。