性能监控

hardey
73 阅读3分钟

性能监控

prformance-image.png

页面测速

指标：

  1. DNS查询：domainLookupEnd - domainLookupStart;
  2. TCP连接建立：connectEnd - connectStart;
  3. ssl建立连接：requestStart - secureConnectionStart;
  4. 请求响应：responseStart - requestStart;
  5. 内容传输：responseEnd - responseStart;
  6. DOM解析：domInteractive - domLoading;
  7. 资源加载：loadEventEnd - loadEventStart;
  8. 首屏耗时： 监听页面打开了3s内首屏的DOM变化，最多的一刻为渲染完成时间；
  9. 页面加载完成时间：loadEventEnd - navigationStart;

接口测速

通过劫持XHR和Fetch进行接口测速

资源测速

通过浏览器performanceResourceTime进行资源测速

浏览器渲染的整个流程

browser-render.png

前端监控性能指标

以下是一些常见的前端性能监控指标：

谷歌指出的核心指标有： LCP、FID、CLS

1. 最大内容绘制（Largest Contentful Paint, LCP）

  • 描述：表示可视区“内容”最大的可见元素开始出现在屏幕上的时间点。
  • tips：页面在加载过程中，是线性的，元素是一个一个渲染到屏幕上的，而不是一瞬间全渲染到屏幕上，所以“渲染面积”最大的元素随时在发生变化。
  • 统计方式：Performance API
new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log("LCP candidate:", entry.startTime, entry);
  }
}).observe({ type: "largest-contentful-paint", buffered: true });

2. 首次输入延迟（First Input Delay, FID）

  • 描述：首次输入延迟，从用户首次与网页互动（即，点击链接、点按按钮或使用由 JavaScript 提供支持的自定义控件）到浏览器能够实际开始处理事件处理脚本以响应该互动的时间。
  • 理想值：小于 100 毫秒
  • 说明：首次输入延迟越短，页面的响应性越好。100 毫秒以内的延迟，用户几乎感觉不到卡顿。
  • 统计方式：Performance API
new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log("First Input Delay: " + entry.duration + "ms");
  }
}).observe({ type: "first-input", buffered: true });

3. 累积布局偏移（Cumulative Layout Shift, CLS）

  • 描述： 指标便是用来衡量在网页的整个生命周期内发生的每次意外布局偏移的最大突发布局偏移分数。
  • 理想值：小于 0.1
  • 说明：CLS 得分低于 0.1 表示页面布局非常稳定，不会出现突然的内容跳动，这有助于避免用户误操作。
  • 统计方式：Performance API
addEventListener("load", () => {
  let DCLS = 0;
  new PerformanceObserver((list) => {
    list.getEntries().forEach((entry) => {
      if (entry.hadRecentInput) return; // Ignore shifts after recent input.
      DCLS += entry.value;
    });
  }).observe({ type: "layout-shift", buffered: true });
});

4.首屏时间（First Contentful Paint, FCP）

  • 描述： 浏览器从开始加载页面到页面的第一个内容绘制的时间；
  • 说明：反映了用户首次看到页面内容的速度。
  • 统计方式：Performance API
new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntriesByName("first-contentful-paint")) {
    console.log("First Contentful Paint: " + entry.startTime + "ms");
  }
}).observe({ type: "paint", buffered: true });

5.页面加载时间（Page Load Time, PLT）

  • 理想值：小于 3 秒
  • 统计方式：Performance API
window.addEventListener("load", function () {
  const loadTime =
    window.performance.timing.loadEventEnd -
    window.performance.timing.navigationStart;
  console.log("页面加载时间: " + loadTime + "ms");
});

6. 资源加载时间（Resource Load Time）

  • 理想值：每个资源小于 1 秒
  • 说明：资源加载时间越短越好，特别是关键资源（如 CSS 和 JS），可以显著提升页面加载速度。

7. DOM 内容加载时间（DOM Content Loaded, DCL）

  • 理想值：小于 1.5 秒
  • 说明：DCL 时间越短，页面的基础结构越早可以与用户交互，提升用户体验。

8. 时间到互动（Time to Interactive, TTI）

  • 理想值：小于 5 秒
  • 说明：TTI 越短，页面的可用性越早得到保证，用户可以更快地与页面进行交互。
avatar
文章
阅读
粉丝