getTTFB.ts 3.22 KB
/*
 * Copyright 2020 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import {initMetric} from './lib/initMetric.js';
import {ReportHandler} from './types.js';


interface NavigationEntryShim {
  // From `PerformanceNavigationTimingEntry`.
  entryType: string;
  startTime: number;

  // From `performance.timing`.
  connectEnd?: number;
  connectStart?: number;
  domComplete?: number;
  domContentLoadedEventEnd?: number;
  domContentLoadedEventStart?: number;
  domInteractive?: number;
  domainLookupEnd?: number;
  domainLookupStart?: number;
  fetchStart?: number;
  loadEventEnd?: number;
  loadEventStart?: number;
  redirectEnd?: number;
  redirectStart?: number;
  requestStart?: number;
  responseEnd?: number;
  responseStart?: number;
  secureConnectionStart?: number;
  unloadEventEnd?: number;
  unloadEventStart?: number;
}

type PerformanceTimingKeys =
    'connectEnd' |
    'connectStart' |
    'domComplete' |
    'domContentLoadedEventEnd' |
    'domContentLoadedEventStart' |
    'domInteractive' |
    'domainLookupEnd' |
    'domainLookupStart' |
    'fetchStart' |
    'loadEventEnd' |
    'loadEventStart' |
    'redirectEnd' |
    'redirectStart' |
    'requestStart' |
    'responseEnd' |
    'responseStart' |
    'secureConnectionStart' |
    'unloadEventEnd' |
    'unloadEventStart';

const afterLoad = (callback: () => void) => {
  if (document.readyState === 'complete') {
    // Queue a task so the callback runs after `loadEventEnd`.
    setTimeout(callback, 0);
  } else {
    // Use `pageshow` so the callback runs after `loadEventEnd`.
    addEventListener('pageshow', callback);
  }
}

const getNavigationEntryFromPerformanceTiming = () => {
  // Really annoying that TypeScript errors when using `PerformanceTiming`.
  const timing = performance.timing;

  const navigationEntry: NavigationEntryShim = {
    entryType: 'navigation',
    startTime: 0,
  };

  for (const key in timing) {
    if (key !== 'navigationStart' && key !== 'toJSON') {
      navigationEntry[key as PerformanceTimingKeys] = Math.max(
          timing[key as PerformanceTimingKeys] - timing.navigationStart, 0);
    }
  }
  return navigationEntry as PerformanceNavigationTiming;
};

export const getTTFB = (onReport: ReportHandler) => {
  const metric = initMetric('TTFB');

  afterLoad(() => {
    try {
      // Use the NavigationTiming L2 entry if available.
      const navigationEntry = performance.getEntriesByType('navigation')[0] ||
          getNavigationEntryFromPerformanceTiming();

      metric.value = metric.delta =
          (navigationEntry as PerformanceNavigationTiming).responseStart;

      metric.entries = [navigationEntry];
      metric.isFinal = true;

      onReport(metric);
    } catch (error) {
      // Do nothing.
    }
  });
};