google-chromefirefoxbrowsernavigation-timing-api

In which Navigation timing stage webpage get displayed?


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

Navigation timing overview
(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?


Solution

  • 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.