const timing = performance.getEntriesByType('navigation')[0] || performance.timing;

/**
 * SSL連線耗時
 */
const sslTime = timing.secureConnectionStart;
connectSslTime = sslTime > 0 ? timing.connectEnd - sslTime : 0;
/**
 * TCP連線耗時
 */
connectTime = timing.connectEnd - timing.connectStart;

<link rel="preconnect" href="https://pwstrick.com" />

TTFB = timing.responseStart - timing.redirectStart;

const paint = performance.getEntriesByType("paint");
if (paint && timing.entryType && paint[0]) {
  firstPaint = paint[0].startTime - timing.fetchStart;
} else {
  firstPaint = timing.responseEnd - timing.fetchStart;
}

if (paint && timing.entryType && paint[1]) {
  firstContentfulPaint = paint[1].startTime - timing.fetchStart;
} else {
  firstContentfulPaint = 0;
}

initDomTreeTime = timing.domInteractive - timing.responseEnd;    // 請求完畢至 DOM 載入的耗時
parseDomTime = timing.domComplete - timing.domInteractive;       // 解析 DOM 樹結構的耗時

domReadyTime = timing.domContentLoadedEventEnd - navigationStart;        // 使用者可操作時間（DOM Ready時間）

  /**
   * 判斷當前宿主環境是否支援 PerformanceObserver
   * 並且支援某個特定的型別
   */
  private checkSupportPerformanceObserver(type: string): boolean {
    if(!(window as any).PerformanceObserver) return false;
    const types = (PerformanceObserver as any).supportedEntryTypes;
    // 瀏覽器相容判斷，不存在或沒有關鍵字
    if(!types || types.indexOf(type) === -1) {
      return false;
    }
    return true;
  }
  /**
   * 瀏覽器 LCP 計算
   */
  public observerLCP(): void {
    const lcpType = 'largest-contentful-paint';
    const isSupport = this.checkSupportPerformanceObserver(lcpType);
    // 瀏覽器相容判斷
    if(!isSupport) {
      return;
    }
    const po = new PerformanceObserver((entryList): void=> {
      const entries = entryList.getEntries();
      const lastEntry = (entries as any)[entries.length - 1] as TypePerformanceEntry;
      this.lcp = {
        time: rounded(lastEntry.renderTime || lastEntry.loadTime),                  // 時間取整
        url: lastEntry.url,                                                         // 資源地址
        element: lastEntry.element ? removeQuote(lastEntry.element.outerHTML) : ''  // 參照的元素
      };
    });
    // buffered 為 true 表示呼叫 observe() 之前的也算進來
    po.observe({ type: lcpType, buffered: true } as any);
    /**
     * 當有按鍵或點選（包括捲動）時，就停止 LCP 的取樣
     * once 引數是指事件被呼叫一次後就會被移除
     */
    ['keydown', 'click'].forEach((type): void => {
      window.addEventListener(type, (): void => {
        // 斷開此觀察者的連線
        po.disconnect();
      }, { once: true, capture: true });
    });
  }

let firstHiddenTime = document.visibilityState === 'hidden' ? 0 : Infinity;
// 記錄頁面隱藏時間 iOS 不會觸發 visibilitychange 事件
const onVisibilityChange = (event) => {
  // 頁面不可見狀態
  if (lcp && document.visibilityState === 'hidden') {
    firstHiddenTime = event.timeStamp;
    // 移除事件
    document.removeEventListener('visibilitychange', onVisibilityChange, true);
  }
}
document.addEventListener('visibilitychange', onVisibilityChange, true);

const IGNORE_TAG_SET = ['SCRIPT', 'STYLE', 'META', 'HEAD', 'LINK'];
const WW = window.innerWidth;
const WH = window.innerHeight;
const FMP_ATTRIBUTE = '_ts';
class FMP { 
  private cacheTrees: TypeTree[];
  private callbackCount: number;
  private observer: MutationObserver;
  public constructor() {
    this.cacheTrees = [];       // 快取每次更新的DOM元素
    this.callbackCount = 0;     // DOM 變化的計數
    // 開始監控DOM的變化
    this.observer = new MutationObserver((): void => {
      const mutationsList = [];
      // 從 body 元素開始遍歷
      document.body && this.doTag(document.body, this.callbackCount++, mutationsList);
      this.cacheTrees.push({
        ts: performance.now(),
        children: mutationsList  
      });
      // console.log("mutationsList", performance.now(), mutationsList);
    });
    this.observer.observe(document, {
      childList: true,    // 監控子元素
      subtree: true   // 監控後代元素
    });
  }
  /**
   * 為 HTML 元素打標記，記錄是哪一次的 DOM 更新
   */
  private doTag(target: Element, callbackCount: number, mutationsList: Element[]): void {
    const childrenLen = target.children ? target.children.length : 0;
    // 結束遞迴
    if(childrenLen === 0)
      return;
    for (let children = target.children, i = childrenLen - 1; i >= 0; i--) {
      const child = children[i];
      const tagName = child.tagName;
      if (child.getAttribute(FMP_ATTRIBUTE) === null && 
            IGNORE_TAG_SET.indexOf(tagName) === -1  // 過濾掉忽略的元素
      ) {
        child.setAttribute(FMP_ATTRIBUTE, callbackCount.toString());
        mutationsList.push(child);  // 記錄更新的元素
      }
      // 繼續遞迴
      this.doTag(child, callbackCount, mutationsList);
    }
  }
}

  /**
   * 是否超出螢幕外
   */
  private isOutScreen(node: Element): boolean {
    const { left, top } = node.getBoundingClientRect();
    return  WH < top || WW < left;
  }
  /**
   * 讀取 FMP 資訊
   */
  public getFMP(): TypeMaxElement {
    this.observer.disconnect(); // 停止監聽
    const maxObj = {
      score: -1,  //最高分
      elements: [],   // 首屏元素
      ts: 0   // DOM變化時的時間戳
    };
      // 遍歷DOM陣列，並計算它們的得分
    this.cacheTrees.forEach((tree): void => {
      let score = 0;
      // 首屏內的元素
      let firstScreenElements = [];
      tree.children.forEach((node): void => {
        // 只記錄元素
        if(node.nodeType !== 1 || IGNORE_TAG_SET.indexOf(node.tagName) >= 0) {
          return;
        }
        const { height } = node.getBoundingClientRect();
        // 過濾高度為 0，在首屏外的元素
        if(height > 0 && !this.isOutScreen(node)) {
          firstScreenElements.push(node);
        }
      });
      // 若首屏中的一個元素是另一個元素的後代，則過濾掉該祖先元素
      firstScreenElements = firstScreenElements.filter((node): boolean => {
        // 只要找到一次包含關係，就過濾掉
        const notFind = !firstScreenElements.some((item ): boolean=> node !== item && node.contains(item));
        // 計算總得分
        if(notFind) {
          score += this.caculateScore(node);
        }
        return notFind;
      });
      // 得到最高值
      if(maxObj.score < score) {
        maxObj.score = score;
        maxObj.elements = firstScreenElements;
        maxObj.ts = tree.ts;
      }
    });
    // 在得分最高的首屏元素中，找出最長的耗時
    return this.getElementMaxTimeConsuming(maxObj.elements, maxObj.ts);
  }

const TAG_WEIGHT_MAP = {
  SVG: 2,
  IMG: 2,
  CANVAS: 4,
  OBJECT: 4,
  EMBED: 4,
  VIDEO: 4
};
/**
 * 計算元素分值
 */
private caculateScore(node: Element): number {
  const { width, height } = node.getBoundingClientRect();
  let weight = TAG_WEIGHT_MAP[node.tagName] || 1;
  if (weight === 1 &&
      window.getComputedStyle(node)['background-image'] && // 讀取CSS樣式中的背景圖屬性
      window.getComputedStyle(node)['background-image'] !== 'initial'
  ) {
    weight = TAG_WEIGHT_MAP['IMG']; //將有影象背景的普通元素 權重設定為img
  }
  return width * height * weight;
}

  /**
   * 讀取首屏內元素的最長耗時
   */
  private getElementMaxTimeConsuming(elements: Element[], observerTime: number): TypeMaxElement {
    // 記錄靜態資源的響應結束時間
    const resources = {};
    // 遍歷靜態資源的時間資訊
    performance.getEntries().forEach((item: PerformanceResourceTiming): void => {
      resources[item.name] = item.responseEnd;
    });
    const maxObj: TypeMaxElement = {
      ts: observerTime,
      element: ''
    };
    elements.forEach((node: Element): void => {
      const stage = node.getAttribute(FMP_ATTRIBUTE);
      let ts = stage ? this.cacheTrees[stage].ts : 0;  // 從快取中讀取時間
      switch(node.tagName) {
        case 'IMG':
          ts = resources[(node as HTMLImageElement).src];
          break;
        case 'VIDEO':
          ts = resources[(node as HTMLVideoElement).src];
          !ts && (ts = resources[(node as HTMLVideoElement).poster]);    // 讀取封面
          break;
        default: {
          // 讀取背景圖地址
          const match = window.getComputedStyle(node)['background-image'].match(/url\(\"(.*?)\"\)/);
          if(!match) break;
          let src: string;
          // 判斷是否包含協定
          if (match && match[1]) {
            src = match[1];
          }
          if (src.indexOf('http') == -1) {
            src = location.protocol + match[1];
          }
          ts = resources[src];
          break;
        }
          
      }
      // console.log(node, ts)
      if(ts > maxObj.ts) {
        maxObj.ts = ts;
        maxObj.element = node;
      }
    });
    return maxObj;
  }

  public observerFID(): void {
    const fidType = 'first-input';
    const isSupport = this.checkSupportPerformanceObserver(fidType);
    // 瀏覽器相容判斷
    if(!isSupport) {
      return;
    }
    const po = new PerformanceObserver((entryList, obs): void => {
      const entries = entryList.getEntries();
      const firstInput = (entries as any)[0] as TypePerformanceEntry;
      // 測量第一個輸入事件的延遲
      this.fid = rounded(firstInput.processingStart - firstInput.startTime);
      // 斷開此觀察者的連線，因為回撥僅觸發一次
      obs.disconnect();
    });
    po.observe({ type: fidType, buffered: true } as any);
    // po.observe({ entryTypes: [fidType] });
  }

let clsValue = 0;
let clsEntries = [];
let sessionValue = 0;
let sessionEntries = [];
new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    // 只將不帶有最近使用者輸入標誌的佈局偏移計算在內。
    if (!entry.hadRecentInput) {
      const firstSessionEntry = sessionEntries[0];
      const lastSessionEntry = sessionEntries[sessionEntries.length - 1];

      // 如果條目與上一條目的相隔時間小於 1 秒且
      // 與對談中第一個條目的相隔時間小於 5 秒，那麼將條目
      // 包含在當前對談中。否則，開始一個新對談。
      if (sessionValue &&
          entry.startTime - lastSessionEntry.startTime < 1000 &&
          entry.startTime - firstSessionEntry.startTime < 5000) {
        sessionValue += entry.value;
        sessionEntries.push(entry);
      } else {
        sessionValue = entry.value;
        sessionEntries = [entry];
      }

      // 如果當前對談值大於當前 CLS 值，
      // 那麼更新 CLS 及其相關條目。
      if (sessionValue > clsValue) {
        clsValue = sessionValue;
        clsEntries = sessionEntries;

        // 將更新值（及其條目）記錄在控制檯中。
        console.log('CLS:', clsValue, clsEntries)
      }
    }
  }
}).observe({type: 'layout-shift', buffered: true});