在 Chrome DevTools 中，完成时间线记录后，源面板的毫秒数是什么意思？

Question

当您访问 https://developers.google.com/web/tools/chrome-devtools/evaluate-performance 并找到“Layout Forced”关键字时，您可以看到左侧面板的图片显示 23.9 毫秒。

我不知道这是什么意思，这意味着使用CPU时间执行这一行？但我发现代码行中的某些记录只有“}”，并且其值是1.2毫秒，而某些值只有定义也有值0.4毫秒，但下一个定义没有值。所以我不知道这到底是什么意思。

Answer 1

一般来说，边距中的时间是运行该行代码所花费的时间。但对于函数声明来说，它是调用该函数的开销。不知道 for 循环的右大括号“}”意味着什么。

这是一个示例：https://imgur.com/a/dEP9lAK

• 调用函数和 for 循环有一点开销（第 10 行和第 12 行）。
• 添加 2 个数字非常快（第 14 行）。
• 相乘并调用 Math.random() 需要更多时间（第 13 和 16 行）
• Math.cos、

  **

  和

  /

  需要更多时间（第 15 行）

要记住的一件事是，如果您使用源映射，它可能会有点偏离。在开发 TypeScript 应用程序时，我花了一段时间才弄清楚为什么时间没有意义；例如为什么像

a = 2

这样简单的东西需要 1 秒，而它下面的复杂线却需要 1 毫秒。当我关闭源映射时，很明显 1 实际上代表了复杂的线。