performance

window.performance.timing即将弃用，使用PerformanceNavigationTiming接口

if (typeof window.PerformanceNavigationTiming === 'function') {

        const Timing = performance.getEntriesByType('navigation')[0]; // PerformanceNavigationTiming Object

}

PerformanceNavigationTiming Object:

domComplete: The domComplete read-only property returns a DOMHighResTimeStamp representing the time immediately before the user agent sets the document's readyState to "complete".

domContentLoadedEventEnd : The domContentLoadedEventEnd read-only property returns a DOMHighResTimeStamp representing the time immediately after the current document's DOMContentLoaded event handler completes.

https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigationTiming

skywarking 源码 时间界定：

public getPerfTiming(): IPerfDetail {
    try {
      let { timing } = window.performance as PerformanceNavigationTiming | any; // PerformanceTiming
      if (typeof window.PerformanceNavigationTiming === 'function') {
        const nt2Timing = performance.getEntriesByType('navigation')[0];

        if (nt2Timing) {
          timing = nt2Timing;
        }
      }
      let redirectTime = 0;

      if (timing.navigationStart !== undefined) {
        redirectTime = parseInt(String(timing.fetchStart - timing.navigationStart), 10);
      } else if (timing.redirectEnd !== undefined) {
        redirectTime = parseInt(String(timing.redirectEnd - timing.redirectStart), 10);
      } else {
        redirectTime = 0;
      }

      return {
        redirectTime,
        dnsTime: parseInt(String(timing.domainLookupEnd - timing.domainLookupStart), 10),
        ttfbTime: parseInt(String(timing.responseStart - timing.requestStart), 10), // Time to First Byte // responseStart进入首字节渲染阶段，也是FCP
        tcpTime: parseInt(String(timing.connectEnd - timing.connectStart), 10),
        transTime: parseInt(String(timing.responseEnd - timing.responseStart), 10),
        domAnalysisTime: parseInt(String(timing.domInteractive - timing.responseEnd), 10), // dom 解析时间，实测某站200毫秒左右，dom解析后开始domInteractive,domContentLoad
        fptTime: parseInt(String(timing.responseEnd - timing.fetchStart), 10), // First Paint Time or Blank Screen Time
        domReadyTime: parseInt(String(timing.domContentLoadedEventEnd - timing.fetchStart), 10),
        loadPageTime: parseInt(String(timing.loadEventStart - timing.fetchStart), 10), // Page full load time
        // Synchronous load resources in the page
        resTime: parseInt(String(timing.loadEventStart - timing.domContentLoadedEventEnd), 10),
        // Only valid for HTTPS
        sslTime:
          location.protocol === 'https:' && timing.secureConnectionStart > 0
            ? parseInt(String(timing.connectEnd - timing.secureConnectionStart), 10)
            : undefined,
        ttlTime: parseInt(String(timing.domInteractive - timing.fetchStart), 10), // time to interact
        firstPackTime: parseInt(String(timing.responseStart - timing.domainLookupStart), 10), // first pack time
        fmpTime: 0, // First Meaningful Paint
      };
    } catch (e) {
      throw e;
    }
  }

Document.readyState

The readyState of a document can be one of following:

loading

The document is still loading.

interactive

The document has finished loading and the document has been parsed but sub-resources such as scripts, images, stylesheets and frames are still loading.

complete

The document and all sub-resources have finished loading. The state indicates that the load event is about to fire.

Window: DOMContentLoaded event

The DOMContentLoaded event fires when the HTML document has been completely parsed, and all deferred scripts (<script defer src="…"> and <script type="module">) have downloaded and executed. It doesn't wait for other things like images, subframes, and async scripts to finish loading.

Window: load event

The load event is fired when the whole page has loaded, including all dependent resources such as stylesheets, scripts, iframes, and images. This is in contrast to DOMContentLoaded, which is fired as soon as the page DOM has been loaded, without waiting for resources to finish loading.

Window - Web APIs | MDN

下图粗滤的解析了正常单页面的渲染过程

• 预备阶段：导航阶段，处在连接相应的过程
• 阶段一：首字节渲染阶段，也是FCP，DOM 树的第一次有效变化 （responseStart）
• 阶段二：基本框架渲染完成 (domComplete)
• 阶段三：获取到数据，渲染到视图上
• 阶段四：图片加载完成，加载过程不被标记 ( loadEvenEnd)

实际上在第一、第三阶段之间还存在着大量的 DOM 变化，Mutation Observer 事件的触发并不是同步的，而是异步触发的，也就是说，等到当前「阶段」所有 DOM 操作都结束才触发。

Mutation Observer 有以下特点

• 它等待所有脚本任务完成后，才会运行（即异步触发方式）。
• 它把 DOM 变动记录封装成一个数组进行处理，而不是一条条个别处理 DOM 变动。
• 它既可以观察 DOM 的所有类型变动，也可以指定只观察某一类变动。

在 load 事件触发后，各个阶段的 tag 已经被打到标签上了