前端性能监控

背景

作为前端，我们肯定比较关心我们页面实际上的性能是如何的，业界比较常见的开源解决方案是sentry，接入方式，官方文档都有说明，本文主要是研究调研，sentry的性能指标计算方式

正文

调研后，发现sentry-javascript项目中有个包：overhead-metrics

CLS

概念参考：https://web.dev/cls/

收集脚本：

      window.cumulativeLayoutShiftScore = undefined;

      const observer = new PerformanceObserver((list) => {
        for (const entry of list.getEntries()) {
          if (window.cumulativeLayoutShiftScore === undefined) {
            window.cumulativeLayoutShiftScore = entry.value;
          } else if (!entry.hadRecentInput) {
            window.cumulativeLayoutShiftScore += entry.value;
          }
        }
      });

      observer.observe({type: 'layout-shift', buffered: true});

      document.addEventListener('visibilitychange', () => {
        if (document.visibilityState === 'hidden') {
          observer.takeRecords();
          observer.disconnect();
        }
      });

LCP

概念参考：https://web.dev/lcp/

收集脚本：

      window.largestContentfulPaint = undefined;

      const observer = new PerformanceObserver((list) => {
        const entries = list.getEntries();
        const lastEntry = entries[entries.length - 1];
        window.largestContentfulPaint = lastEntry.renderTime || lastEntry.loadTime;
      });

      observer.observe({ type: 'largest-contentful-paint', buffered: true });

      document.addEventListener('visibilitychange', () => {
        if (document.visibilityState === 'hidden') {
          observer.takeRecords();
          observer.disconnect();
        }
      });

FID

概念参考：https://web.dev/fid/

收集脚本：

      window.firstInputDelay = undefined;

      const observer = new PerformanceObserver((entryList) => {
        for (const entry of entryList.getEntries()) {
          window.firstInputDelay = entry.processingStart - entry.startTime;
        }
      })

      observer.observe({type: 'first-input', buffered: true});

      document.addEventListener('visibilitychange', () => {
        if (document.visibilityState === 'hidden') {
          observer.takeRecords();
          observer.disconnect();
        }
      });