js 性能监控和分析

(function () {
  if (window.performance || window.webkitPerformance) {
    const perf = window.performance || window.webkitPerformance;
    let timing = perf.timing; // 即将弃用
    // 优先使用 navigation v2  https://www.w3.org/TR/navigation-timing-2/
    // window.PerformanceNavigationTiming
    if (typeof window.PerformanceNavigationTiming === 'function') {
      timing = window.performance.getEntriesByType('navigation')[0]
    }
 
    /**
     * 根据货币类型转换价格
     * @param onload 【重要】页面加载完成的时间
     * @param domReady 【重要】解析 DOM 树结构的时间/首屏时间
     * @param domReadyTime domReadyTime树结构的时间
     * @param redirect 【重要】重定向的时间
     * @param lookupDomain 【重要】DNS 查询时间
     * @param ttfb 【重要】读取页面第一个字节的时间
     * @param request 【重要】内容加载完成的时间
     * @param loadEvent 【重要】执行 onload 回调函数的时间
     * @param appcache  DNS 缓存时间 查询缓存数据时间
     * @param unloadEvent  卸载页面的时间
     * @param blankTime  页面白屏时间
     * @param connect  TCP 建立连接完成握手的时间
     */
    var timer = setInterval(function () {
      if (0 !== timing.loadEventEnd) {
        clearInterval(timer);
        var data = {
          url: window.location.href,
          userAgent: window.navigator.userAgent,
          lookupDomain: timing.domainLookupEnd - timing.domainLookupStart,
          request: timing.responseEnd - timing.requestStart,
          ttfb: timing.responseStart - timing.navigationStart,
          redirect: timing.redirectEnd - timing.redirectStart,
          domReadyTime: timing.domContentLoadedEventEnd - timing.fetchStart,
          domready: timing.domComplete - timing.domInteractive,
          blankTime: (timing.domInteractive || timing.domLoading) - timing.fetchStart,
          onload: timing.loadEventEnd - timing.fetchStart,
          unloadEvent: timing.unloadEventEnd - timing.unloadEventStart,
          loadEvent: timing.loadEventEnd - timing.loadEventStart,
          appcache: timing.domainLookupStart - timing.fetchStart,
          connect: timing.connectEnd - timing.connectStart,
          platform: commonInfo.platform,
          windowScreen: commonInfo.window_screen,
          networkType: commonInfo.network_type,
          canvasId: commonInfo.canvas_id,
          ip: commonInfo.ips,
          cookie: commonInfo.cookie,
        };
        requestList.performance.add(data);
      };
    })
  }
}());

performance.getEntries().filter(item => item.name === 'first-paint')[0];  // 获取 FP 时间
performance.getEntries().filter(item => item.name === 'first-contentful-paint')[0];  // 获取 FCP 时间
performance.getEntriesByName('first-paint'); // 获取 FP 时间
performance.getEntriesByName('first-contentful-paint');  // 获取 FCP 时间
// 也可以通过 performanceObserver 的方式获取
var observer = new PerformanceObserver(function(list, obj) {
  var entries = list.getEntries();
  entries.forEach(item => {
    if (item.name === 'first-paint') {
      ...
    }
    if (item.name === 'first-contentful-paint') {
      ...
    }
  })
});
observer.observe({type: 'paint'});

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('LCP candidate:', entry.startTime, entry);
  }
}).observe({type: 'largest-contentful-paint', buffered: true});

let longTask = [];
new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    // 收集每一个 long task 结束的时间
    longTask.push({
      startTime: entry.startTime,
      duration: entry.duration,
      endTime:entry.startTime + entry.duration
    });
  }
}).observe({type: 'longtask', buffered: true});
 

// 安静窗口的计算就有点复杂了。如何知道在 5s 的时间内请求数不超过 2 次呢 ？
// 关于这一点，我们可以通过拦截网络请求加一个请求 pool 实现。
// 我们先来实现一个请求 pool :
 
// 请求池
let pool = [];
//定時器
var timer = null;
// TTI
var tti;
// 将发起的请求添加到请求池中
function push(id) {
    if(pool.length < 3 && !tti)
        timer = setTimeout(() => {
            // 如果 timer 的 callback 能顺利执行，说明连续 5 s 的请求数没有超过 2 次
            let fcp = performance.getEntriesByName('first-contentful-paint');
            TTI = longTask.length ? longTask[longTask.length - 1].endTime - fcp[0].startTime : fcp[0].startTime;
        }, 5000)
    else {
      clearTimeout(timer);
    }
 
}
// 结束的请求从请求池中移除
function pop(id) {
  pool = pool.filter(item => item !== id);
    if(pool.length < 3 && !tti)
        timer = setTimeout(() => {
            // 如果 timer 的 callback 能顺利执行，说明连续 5 s 的请求数没有超过 2 次
            let fcp = performance.getEntriesByName('first-contentful-paint');
            TTI = longTask.length ? longTask[longTask.length - 1].endTime - fcp[0].startTime : fcp[0].startTime;
        }, 5000);
    else {
      clearTimeout(timer);
    }
}
 
let uniqueId = 0;
 
// 接下来，再实现网络请求拦截。通常，网络请求可以分为三类: xhr 请求、fetch 请求、静态资源请求。为了拦截这些网络请求，我们可以做一些拦截覆写和监听操作。
// 拦截 xhr 请求
const proxyXhr = () => {
  const send = XMLHttpRequest.prototype.send;
  XMLHttpRequest.prototype.send = function(...args) {
    const requestId = uniqueId++;
    // 将请求添加到请求 pool 中
    push(requestId);
    this.addEventListener('readystatechange', () => {
      if (this.readyState === 4) {
        // 将请求从请求池中移除
        pop(requestId);
      }
    });
    return send.apply(this, args);
  };
}
// 拦截 fetch 请求：
function patchFetch() {
  const originalFetch = fetch;
  fetch = (...args) => {
    return new Promise((resolve, reject) => {
    const requestId = uniqueId++;
    // 将请求添加到请求 pool 中
    push(requestId);
    originalFetch(...args).then(
      (value) => {
        // 将请求从请求 pool 中移除
        pop(requestId);
        resolve(value);
      },
      (err) => {
        // 将请求从请求 pool 中移除
        pop(err);
        reject(err);
      });
    });
  };
}
// 静态资源请求的处理最为麻烦。我们可以通过 mutationObserver 对静态资源请求做监听，然后通过 PerformanceOberserver 来检测请求是否完成。
const requestCreatingNodeNames = ['img', 'script', 'iframe', 'link', 'audio', 'video', 'source'];
 
function observeResourceFetchingMutations() {
    const mutationObserver = new MutationObserver((mutations) => {
        for (const mutation of mutations) {
            if (mutation.type == 'childList' && mutation.addedNodes.length && requestCreatingNodeNames.includes(mutation.addedNodes[0].nodeName.toLowerCase())) {
                // 收集静态文件链接
                push(mutation.addedNodes[0].href || mutation.addedNodes[0].src);
            } else if (mutation.type == 'attributes' && (mutation.attributeName === 'href' || mutation.attributeName === 'src') &&
                requestCreatingNodeNames.includes(
                    mutation.target.tagName.toLowerCase())) {
                push(mutation.target.href || mutation.target.src);
            }
        }
    });
    // 监听静态资源节点
    mutationObserver.observe(document, {
        attributes: true,
        childList: true,
        subtree: true,
        // img、script、link
        attributeFilter: ['href', 'src'],
    });
 
    new PerformanceObserver((entryList) => {
        for (const entry of entryList.getEntries()) {
            // 将完成的静态资源请求移除
            pop(entry.name);
        }
    }).observe({type: 'resource', buffered: true});
}
 
// 这样，我们就可以自己手动计算 TTI 了。不过要注意哈，上面代码只是根据官方提供的计算公式反推出来的，实际计算出来的数据，和 lighthouse 面板中的数据会有较大的误差，因此仅供参考，不在实际性能监控工具中使用。
// 了解完 TTI，我们再来看看 TBT。
// TBT, total blocking time，总的阻塞时间， lighthouse 面板中的六大指标之一，用于测量 FCP 到 TTI 之间的总的阻塞时间，值越小约好。官方资料: TBT。
// 和 TTI 一样，官方也没有提供获取 TBT 的有效接口，只能通过 lighthouse 面板来查看，不会作为 Sentry 做性能分析的指标。
// 不过我们既然可以手动计算 TTI，那么也可以手动计算 TBT。计算过程也很简单，就是在计算 TTI 的时候，遍历收集的 longTask, 计算总的阻塞时间。
let TBT = longTask.reduce((initial, item) => initial + item.durationg - 50, 0);

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    const delay = entry.processingStart - entry.startTime;
    console.log('FID candidate:', delay, entry);
  }
}).observe({type: 'first-input', buffered: true});

new PerformanceObserver(function(list) {
    var perfEntries = list.getEntries();
    for (var i = 0; i < perfEntries.length; i++) {
        ...
    }
})observe({ type: 'longtask'});

new PerformanceObserver(function(list) {
    var perfEntries = list.getEntries();
    for (var i = 0; i < perfEntries.length; i++) {
        ...
    }
})observe({type: 'layout-shift', buffered: true});