转转B端项目页面性能统计实践

const hackRouter = () => {
  if (!window?.history?.pushState) {
    return;
  }
  // 浏览器的历史记录发生变化时被触发, 导航前进、后退
  const oldOnPopState = window.onpopstate;
  window.onpopstate = function(this: WindowEventHandlers, ...args: any[]): any {
    const to = window.location.href;
    const from = lastHref;
    lastHref = to;
    // 通知订阅的回调
    triggerHandlers('history', {
      from,
      to
    });
    if (oldOnPopState) {
      try {
        return oldOnPopState.apply(this, args);
      } catch (e) {}
    }
  };

  // history pushState 或 replaceState 触发，通过 history api 方式
  const wrapHistoryFn = (type: 'pushState'|'replaceState') => {
    const originalHistoryFunction = window.history[type]
    return function(this: History, ...args: any[]): void {
      const url = args.length > 2 ? args[2] : undefined;
      if (url) {
        // coerce to string (this is what pushState does)
        const from = lastHref;
        const to = String(url);
        lastHref = to;
        // 通知订阅的回调
        triggerHandlers('history', {
          from,
          to
        });
      }
      return originalHistoryFunction.apply(this, args);
    };
  };
  window.history.pushState = wrapHistoryFn("pushState");
  window.history.replaceState = wrapHistoryFn("replaceState");
}

// 获取 PerformanceTiming 相关数据
export const getPerformanceTimingData = (task: TaskTypes) => {
  if (!window?.performance?.timing) return {}
  const { metrics } = task;
  const { state } = task.ctx;
  const ptiming = performance.timing;
  // 默认为 -1 方便过滤无效值
  const result = {
    blankTime: -1,
    dnsTime: -1,
    httpTime: -1,
    domTime: -1,
    domReady: -1,
    // ...
  }
  // 页面加载状态
  if(state === 'pageload') {
    // ...
    // 白屏
    result.blankTime = fix(ptiming.responseStart - ptiming.navigationStart);
    // DNS查询
    result.dnsTime = fix(ptiming.domainLookupEnd - ptiming.domainLookupStart);
    // HTTP请求
    result.httpTime = fix(ptiming.responseEnd - ptiming.responseStart);
    // 解析dom树
    result.domTime = fix(ptiming.domComplete - ptiming.domInteractive);
    // DOMready
    result.domReady = fix(ptiming.domContentLoadedEventEnd - ptiming.navigationStart)
    // ...
  }
  // 路由切换状态
  if (state === 'navigation') {
    // ...
  }
  return result
}

// 记录
let performanceCursor: number = 0;
// 获取当前页面资源列表
export const startPerformance = (task: TaskTypes) => {
  const { timeOrigin } = task.ctx;
  if (!window.performance || !window.performance.getEntries || !timeOrigin) {
    return;
  }
  // performanceEntries
  const performanceEntries = performance.getEntries();
  const pss = performanceEntries.slice(performanceCursor);
  // 处理 各种 performanceEntry 资源
  formatResourceEntries(task, pss);
  performanceCursor = Math.max(performanceEntries.length - 1, 0);
}
export const formatResourceEntries = (task: TaskTypes, entries: PerformanceEntryList) => {
  const { state, startTimestamp, timeOrigin } = task.ctx;
  const { metrics } = task
  entries.forEach(entry => {
    const startTime = entry.startTime;
    // console.log( timeOrigin, startTime, startTimestamp, timeOrigin + startTime < startTimestamp)
    if (state === 'navigation' && timeOrigin + startTime < startTimestamp) {
      return;
    }
    const baseStartTime = startTimestamp - timeOrigin;
    switch (entry.entryType) {
      case 'navigation':
        // 处理 bodysize 
        // ...
      case 'paint':
        // 处理 paint 指标 fcp fp
        // ...
      case 'resource':
        // 序列化各种资源, 如js/css/img/jsonp/ajax/fetch/iframe...
        calcResource(entry, result, baseStartTime);
    }
    // ...
}

// 初始化基础业务指标
export const initBaseData = (task: TaskTypes) => {
  const { params = { backup: {} }, options = {} } = task;
  // ...
  Object.assign(params, {
    pagetype: options?.pagetype || pagetype,
    actiontype: options?.actiontype || actiontype,
    appid: options?.appid || appid,
    // and more ...
  });
  return task;
}

function startLongTasks(): void {
  const entryHandler = (entries: PerformanceEntry[]): void => {
    for (const entry of entries) {
      const startTime = entry.startTime
      const duration = entry.duration;
      const endTime = startTime + duration;
      const longtask = {
        name: `longtask-${++n}`,
        startTime,
        endTime,
        duration
      }
      longTasks.push(longtask);
    }
  };
  if(PerformanceObserver?.supportedEntryTypes?.includes('longtask')) {
    // 注册 longtask 异步任务
    observe('longtask', entryHandler);
  }
}

const entry:PerformanceResourceTiming = {
  "name": "https://xxx.zzz.com/yyy.css?v=5J1NDtbnnIr2Rc2SdhEMlMxD4l9Eydj88B31E7_NhS4",
  "entryType": "resource",
  "startTime": 1924.6000000238419,
  "duration": 1400.5999999642372,
  "initiatorType": "link",
  "fetchStart": 1924.6000000238419,
  "responseEnd": 3325.199999988079,
}

// 将 entries 分类，并把单个entry 进行字符串化后，再将所有 css entry 合并
const cssEntry:string = 'https://xxx.zzz.com/yyy.css|1924|1924|3325'