如何使用 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

Firefox Profiler 提供了更多最新文档，网址为 profiler.firefox.com/docs/。然而，以下可能有一些 Gecko 特定问题的潜在有用信息。

您可以查看一些关于 Firefox Profiler 的常见问题。

报告性能问题有一个分步指南，用于在 Firefox 开发人员要求时获取配置文件。

1.时间线

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

提示：使用“[default]”注释的线程在父级中 （又名“UI”，又名“浏览器 chrome”，又名“主”）进程和那些 带有“[tab]”注释的 Web 内容（又名“子”）进程中。

提示：父进程中长时间运行的任务会阻塞所有输入或 使用浏览器 UI 绘制（又名“UI jank”），而长时间运行的任务 在内容过程中会阻止与页面的交互，但 由于 APZ，仍然允许用户平移和缩放。

跟踪标记

Red：这表明事件循环没有响应。请注意，此处不包括 vsync 等高优先级事件。另请注意，这表明如果有事件等待会发生什么，而不一定有事件等待那么长时间。

Black：这些表示同步 IPC 调用。

2。调用树

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

提示：您可以右键单击函数名称以获取复制选项 它的名字到剪贴板。

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