React Profiler：时间是啥意思？

Posted 2023-03-06

【中文标题】React Profiler：时间是啥意思？

【英文标题】：React Profiler: What do the timings mean?React Profiler：时间是什么意思？

【发布时间】：2018-11-16 17:35:07

【问题描述】：

我正在使用 React Profiler 来提高我的应用程序的效率。它通常会吐出这样的图表：

我很困惑，因为时间没有加起来。例如，如果“Shell”的总提交时间为 0.3ms，那么“Main”为“0.2ms of 0.3ms”，这将是有意义的。但事实并非如此。

这些时间的确切含义是什么？它们是如何相加的？

（注意：我已阅读 "Introducing the React Profiler"，但从 section 看来，自那篇文章以来，这种时间报告约定是新的。）

【参考方案1】：

第一个数字 (0.2ms) 是自身持续时间，第二个数字 (0.3ms) 是实际持续时间。大多数情况下，自我持续时间是实际持续时间减去花在孩子身上的时间。我注意到这些数字并不总是完美地相加，我猜这要么是一个四舍五入的伪影，要么是因为一些时间花在了隐藏的工作上。例如，在您的情况下，Shell 的实际时间为 3.1ms，自身持续时间为 0.3ms，这意味着 2 个子项（Navbar 和 Main）加起来应为 3.1ms - 0.3ms 或 2.8ms。但是，我们看到 Navbar 没有重新渲染，所以是 0ms，但 Main 的实际持续时间只有 2.7ms，而不是 2.8ms。当您进行性能调整时，它实际上不会产生任何影响，但它确实有点违反预期。

【讨论】：

我认为你对四舍五入的猜测很好。不过，我想在接受它作为答案之前确认这个猜测。