Chrome Performance 查看哪个函数耗时久

要查看哪个函数在 Chrome Performance 中耗时较长，可以使用 Chrome 开发者工具中的 Flame Chart 面板。

在 Performance 面板中，点击 Flame Chart 面板，可以看到一个时间轴上的火焰图，每个火焰代表一个 JavaScript 函数。火焰的高度表示函数执行的时间，颜色表示函数的调用深度。

通过 Flame Chart 可以找到耗时较长的函数。找到一个长火焰，点击火焰的右侧三角形，可以展开该函数的子函数。通过这种方式可以深入了解函数的调用关系和执行时间。

另外，在火焰图的顶端有一个搜索框，可以输入函数名进行搜索。搜索结果会高亮显示，方便找到特定的函数。

注意，Flame Chart 只能显示 JavaScript 函数的执行时间，对于浏览器本身的操作（比如 DOM 渲染、网络请求等）无法进行分析。如果需要分析这些操作的性能，可以使用其他面板，如 Network 面板、Rendering 面板等。

相关问题

chrome performance

Chrome Performance是一个用于浏览器性能分析的工具。通过使用无痕模式，可以确保Chrome在一个相对干净的环境下运行，避免已安装的插件对性能分析结果的影响。Chrome Performance提供了多种方法来进行性能分析，包括使用Devtools-Performance面板、Performance API和Chrome开发者工具中的Performance面板等。在性能分析过程中，可以使用Disable JavaScript Samples选项来禁用JavaScript调用栈的记录，从而获得更简短的记录结果。

Chrome Performance 性能分析

针对 Chrome Performance 性能分析，可以通过以下步骤进行：

1. 打开 Chrome 开发者工具（快捷键 F12），进入 Performance 面板。
2. 点击左上角的 Record 按钮开始记录性能数据。
3. 在浏览器中进行操作，比如打开一个网页、进行交互等。
4. 停止记录性能数据，分析性能瓶颈。

在 Performance 面板中，可以看到多个子面板，包括 Summary、Flame Chart、Bottom-Up、Call Tree 等。这些子面板可以帮助我们更详细地分析性能问题。比如，通过 Flame Chart 可以看到每个函数的执行时间以及调用关系；通过 Bottom-Up 可以看到每个函数的 CPU 使用率和内存占用情况；通过 Call Tree 可以查看函数的执行时间和调用次数等。

除了 Chrome 开发者工具，还有一些第三方工具也可以用于 Chrome Performance 性能分析，比如 Lighthouse、PageSpeed Insights 等。这些工具可以提供更多的性能指标和建议，帮助我们优化网站性能。