google浏览器控制台网络请求用时区别

google浏览器控制台网络请求用时区别

在浏览器的开发者工具控制台中，通常可以看到一行显示了三个时间指标：完成用时、DOMContentLoaded、加载时间。这些时间指标用于帮助你了解网页的加载性能。

DOMContentLoaded

这个时间表示文档的初始 HTML 已完全加载和解析完成时的时间点，但不包括样式表、图片和子框架的加载。DOMContentLoaded 事件在 DOM 树构建完成后触发，此时 JavaScript 可以访问和操作 DOM 结构，但此时其他资源（如图片、样式表）可能还在加载中。通常，这个时间标记的是 DOM 结构完成的时刻。

使用performance可以获取dom加载的时间

window.addEventListener('load', () => {
  // 获取 navigation entry
  const [navigation] = performance.getEntriesByType('navigation');

  if (navigation) {
    setTimeout(() => {
      console.log('Timing details:', {
        "DOMready时间": navigation.domContentLoadedEventEnd - navigation.startTime,
      });
    })
  } else {
    console.warn('PerformanceNavigationTiming is not supported by this browser.');
  }
});

加载时间

这个时间表示从用户请求页面开始，到页面完全加载（包括所有资源）所花费的时间。它是页面完全加载和渲染完成的时间点，也就是包括了页面及所有静态和动态资源的加载时间,包括 CSS、JavaScript、图片等所有资源的加载。

使用performance可以获取页面onload时间

"页面onload时间": navigation.loadEventEnd - navigation.startTime,

完成用时

这个时间表示从页面开始加载到页面完全加载并渲染完成的总时间。它包括了所有资源的加载时间、脚本的执行时间、样式表的应用以及可能的重排（reflow）和重绘（repaint）。简单来说，这是页面加载到用户可以交互的完整过程的时间。

这个完成用时没有找到performance接口可以输出的方式，我理解的就是这个时间也包含ajax网络请求以及用户在页面停留的时间（当切换路由页面时，这个完成用时就会加上停留页面的时间）