加载、脚本、渲染、绘画时间是如何计算的？

Question

在“性能”面板的“摘要”选项卡上，显示浏览器为每个类别花费的总时间 -

这些时间是如何计算的？我参考了thisSO答案以及源代码，可以看到有一些事件映射到每个类别。我有 Chrome 性能跟踪转储，当我计算每个类别的这些事件的持续时间总和时，数字不匹配。

有人可以帮我计算这些值吗？或者任何其他方式以编程方式获取它们？

Answer 1

在js中这样做：

// Start performance measurement
performance.mark('start');

// Perform actions (e.g., load resources, execute scripts, render content)

// End performance measurement
performance.mark('end');

// Calculate durations
performance.measure('loading', 'start', 'end');
// Repeat for other categories

// Summarize durations by category
const loadingDuration = performance.getEntriesByName('loading')[0].duration;
// Repeat for other categories

// Display or use the results
console.log('Loading duration:', loadingDuration);
// Repeat for other categories

此方法允许您以编程方式获取特定事件的持续时间，并计算浏览器为每个类别花费的总时间。然后，您可以将这些值与从 Chrome 性能跟踪转储中获得的值进行比较，以验证计算或调查任何差异。