2022-12-08

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


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

Value

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):**测量页面从开始加载到页面内容的任何部分在屏幕上完成渲染的时间。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容