前端性能指标监控

发表于 更新于 本文字数： 784 阅读时长 ≈ 1 分钟

Paint

当用户导航到网页时，他们会寻找一些视觉反馈来确保一切正常，我们可以用 paint 计时接口来衡量这个指标。

Paint 是指将渲染树转换成屏幕上的像素的过程。

function showPaintTimings() {
  if (window.performance) {
    let performance = window.performance;
    let performanceEntries = performance.getEntriesByType('paint');
    performanceEntries.forEach(performanceEntry => {
      console.log("The time to " + performanceEntry.name + " was " + performanceEntry.startTime + " milliseconds.");
    });
  } else {
    console.log('Performance timing isn\'t supported.');
  }
}

这个接口暴露两个值：

  • Time to first paint: 浏览器开始在屏幕上渲染内容的第一个比特
  • Time to first contentful paint: 浏览器开始渲染 DOM、文字、图片的第一个比特

perf metrics load timeline