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.
skyworking时间界定:
fptTime: parseInt(String(timing.responseEnd - timing.fetchStart), 10), // First Paint Time or Blank Screen Time
domAnalysisTime: parseInt(String(timing.domInteractive - timing.responseEnd), 10) // dom 解析时间,实测某站200毫秒左右,dom解析后开始domInteractive,domContentLoad
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.
https://web.dev/user-centric-performance-metrics/?utm_source=devtools
First contentful paint 首次内容绘制 (FCP):**测量页面从开始加载到页面内容的任何部分在屏幕上完成渲染的时间。