In which Navigation timing stage webpage get displayed?

Question

The performance.timing stores the timing of the various events' that happen during the webpage loading:

_{(source: dvcs.w3.org)}

And I learned that HTML tags get parsed and <script> elements with neither 'defer' nor 'async' attribute get executed synchronously between domLoading and domInteractive, and then scripts with 'defer' attribute(i.e., scripts in list of scripts that will execute when the document has finished parsing) get executed before DOMContentLoaded. And then execute <script> element with async attribute, if there is any, before document.readyState is set to complete and load event fired on the Window object.

Spin the event loop until the set of scripts that will execute as soon as possible and the list of scripts that will execute in order as soon as possible are empty.

My question is when the webpage contents get displayed? Are they displayed at the same time when HTML tags are parsed? or in the scripts execute phase? or after loadEventEnd?
When load a large page, the loading icon still spins for a while after the page get displayed, Is the browser executing scripts during this time?

Answer 1

HTML pages are displayed incrementally. Display starts at the point when domInteractive happens (at which point typically not all the content is present yet), and continues after that point, in general.

Answer 2

There is one property available in IE9 onwards that may work for you, a Microsoft-only prefixed NavigationTiming attribute called window.performance.timing.msFirstPaint. This attribute exposes the first time the page is painted.

It's not (yet) available in the other browsers, and we haven't seen much traction from them so I'm not sure that it will ever become part of the NavigationTiming standard.