在 Chrome 开发者工具的分析器（Profiler）选项卡中，我们经常会看到一个叫做“程序（Program）”的部分。那这个“程序”到底是什么呢？本文将详细解释。
程序是什么？
在分析器中，“程序”指的是 JavaScript 执行上下文（Execution Context），也可以理解为当前正在执行的函数或全局代码。JavaScript 运行时会创建执行上下文对象并将其压入执行上下文栈（Execution Context Stack）中。当一个函数被调用时，就会创建一个新的执行上下文对象并推入执行上下文栈的顶部。
在分析器中，“程序”通常代表着当前的执行上下文。因此，在分析 JavaScript 性能时，我们可以通过查看某个特定的执行上下文来了解该函数的性能情况。
如何使用程序面板
现在来演示一下如何在程序面板中进行性能分析。
首先，打开 Chrome 开发者工具，进入分析器选项卡。接着，点击左上角的红色圆形按钮开始记录性能数据。
然后，在页面上执行一些操作，比如点击按钮或输入搜索词。完成操作后，点击红色圆形按钮停止录制。
现在你应该能看到分析器面板上的各种图表和数据。接下来，让我们注意一下程序面板。
点击程序面板选项卡，你会看到类似如下的结果：
在这个例子中，我们可以看到 calculateFibonacci 函数是最耗时的函数，占用了总运行时间的 97%。此外，我们还可以看到 calculateFactorial 和 waitForFiveSeconds 函数也消耗了相当一部分时间。
通过查看程序面板，我们可以找出性能瓶颈并优化代码以提高性能。
结论
在 Chrome 开发者工具的分析器选项卡中，“程序”指的是当前正在运行的 JavaScript 执行上下文，通过查看程序面板，我们可以找到性能瓶颈并进行优化。希望本文能够对你了解 Chrome 分析器有所帮助！
示例代码：
-------- ----------------------- -
-- ---- -- -- -
------ ----
-
------ ---------------------- - -- - ---------------------- - ---
-
-------- ----------------------- -
-- ---- --- -- -
------ --
-
------ --- - ---------------------- - ---
-
-------- -------------------- -
----- ----- - -----------
----- ----------- - ----- - ----- --
-
------------------------------------
------------------------------------
---------------------以上代码包含了三个函数：calculateFibonacci 计算斐波那契数列，calculateFactorial 计算阶乘，waitForFiveSeconds 等待 5 秒钟。在分析器中运行这些函数，我们可以看到它们各自的性能情况。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/9391