javascriptperformanceperformance-testingnavigation-timing-api

Deprecated domLoading is removed! What to use instead?

The domLoading time represents the very beginning of the browser processing a document.

enter image description here

But the domLoading attribute is removed from Timing API: performance.getEntriesByType("navigation")[0].domLoading == undefined

I found a motivation from 17 Sep 2015:

The domLoading attribute is deprecated and may be removed in future versions of this specification. Due to differences in when a Document object is created in existing user agents, the value returned by the domLoading is implementation specific and should not be used in meaningful metrics.

Neither MDN tell what to use instead. I find it very strange that I didn't find any questions about this. The responseEnd and domInteractive is the nearest attributes in time that I can see, but they differ too much.

Without this attribute to be used in processing the document I can not know how long it take for a document to be interactive, to get content loaded or to complete.

Is there any correct reference to measure and compare with, that I have missed or can use instead?

var nt = performance.getEntriesByType("navigation")[0],
    /* domLoading = nt.domLoading; <<< Error: undefined */
    domLoading = nt.responseEnd; //Not correct? Hopefully same.

console.log("Dom parsed in " + (nt.domInteractive - domLoading) + " ms")

console.log("Dom ready in " + (nt.domContentLoadedEventStart - domLoading) + " ms")

console.log("Dom complete in " + (nt.domComplete - domLoading) + " ms")

I found this new timeline at w3c.github.io showing there is no start of dom to measure from..

Navigation Timing level 2

Solution

  • The w3c standards say domLoading is no longer in PerformanceNavigationTiming
    Chrome and Firefox set performance.domLoading == undefined but the property is still there. You can see it in the console.

    console.log(JSON.stringify(performance.timing).split(/[{,}]/).join('\n'))

    Put this in the beginning of <head> to reclaim it back: 

    <script>
  Performance.prototype.domLoading = performance.now()
</script>

    This works because DOM has just started to parse the page.