带有每个语句结果的 JavaScript 分析答案

【问题标题】：JavaScript profiling with per-statement results带有每个语句结果的 JavaScript 分析
【发布时间】：2015-06-06 12:46:14
【问题描述】：

我有一个高度递归的 JavaScript 函数，它不调用其他 JavaScript 函数。它只是调用自身执行一些简单逻辑并调用系统函数的一个函数（Array.slice、Array.splice、Array.push 等）。

我正在尝试对其进行优化，但是 Chrome 和 Firefox（该网站工作的唯一浏览器）DevTools 和 Firebug 的分析器没有显示比函数调用更具体的任何内容。 Visual Studio 有一个好东西，在分析应用程序后，它会告诉您在函数的每一行上花费了多少执行百分比，这真的很有帮助。

我尝试将函数分解为更小的函数，但随后函数调用开销膨胀，占用了我的大部分执行时间。

【问题讨论】：

如果您可以在随机时间手动暂停它并显示调用堆栈，那将显示当前正在执行的每一行代码。做 10 次。你看到的每一行代码或函数的成本大约是你在堆栈上看到它的时间的一小部分。这给出了非常粗略的测量，但虽然时间测量很粗略，但关于为什么它需要时间的信息非常详细。毕竟，这才是你真正想知道的，不是吗？
据我了解，它要求对每个语句进行分析。因此 JavaScript 作者可以了解例如是使用正则表达式匹配字符串还是手动解析字符串，对吧？
@SebastianZartner 正确
因此，增强不同的 DevTools 是一个有效的请求。请参阅下面的答案。
即使将函数分解为更小的函数，虽然仍然有很多函数调用开销，但函数之间的相对成本（代表行）仍然是准确的，不是吗？

标签： javascript profiling firebug google-chrome-devtools firefox-developer-tools

【解决方案1】：

Firebug 和 DevTools 的分析器为您提供有关每个函数花费了多少时间的详细信息。请看以下截图：

Firebug（Own Time 列）

Firefox DevTools（Self Time 列）

Chrome DevTools（Self 列）

Firefox 开发工具还允许您通过启用 Performance 面板选项中的选项 Show Gecko Platform Data 来包含平台数据：

虽然这些工具仅显示每个功能的数据。它们不允许您显示每行或更准确地说是每条语句的信息，可能是因为 JavaScript 作者无法直接影响这些信息。

如果您认为此信息可能与 JavaScript 作者相关，您应该为每个工具提交请求以实现此功能，并解释其背后的原因。

【讨论】：

【解决方案2】：

英特尔 XDK 提供您需要的信息。这是 Inbtel XDK 分析工具的链接：https://software.intel.com/en-us/xdk/docs/using-the-profile-tab 有几张图片和帮助如何使用它。

我们正在收集配置文件并通过自身时间指标对源视图进行注释。

目前我们正在 Android 设备上执行此操作，但计划将 GUI 迁移到 CDT 并对其进行上游处理。但即使在上游之前，此功能也将在名为 Crosswalk 的浏览器中在 Windows 和 Linux 平台上可用。 Crosswalk 是一个基于 chromium 的浏览器，包含有前景的功能，例如 SIMD.js 或 WebCL.js

关于收集信息的更多世界。英特尔 XDK JavaScript CPU 分析器仅按自身时间注释源，但我们正在努力添加总时间 - 某行以及该行中的所有被调用函数花费了多少时间。

要运行分析，您需要下载 XDK，创建新项目并将代码添加到其中。然后切换到配置文件选项卡，通过电线插入设备，如果未选择 CPU 分析器，则选择它，然后按配置文件按钮。等待您的使用反馈。

【讨论】：