Hi everyone,
I am a newbie for web performance. I am trying to figure out the relationship between the timestamp when DomContentLoadedEvent is fired and the timestamp when browser start to paint content.
does DomContentLoadedEvent indicate browser start to render soon? or can browser start to paint before DomContentLoadedEvent is fired?
Thank you!
They are completely unrelated and will depend on the page you are looking at. DOMContentLoaded means the browser’s parser made it to the end of the HTML (and executed any blocking scripts). Any given page can render well before or well after that point depending on how it is constructed.
Thank you so much Patrick,
do you have any example in mind that a website can render well before DOMContentLoaded (before the HTML is even parsed)?
Sure, here: WebPageTest Test - WebPageTest Details
DOMContentLoaded at 4.1s, start render at 2.2s.
The browser parses the HTML incrementally as it goes through the document and it can render what it has any time after it gets into the . It’s not unusual to render before DCL for pages that have blocking scripts towards the end of the document. DCL just means it has completed parsing ALL of the HTML but it has enough to render content a lot earlier.
Often it will choose NOT to render earlier so it doesn’t have to do layout/paint multiple times so it tries to be greedy and keep parsing HTML as quickly as it can but if it gets delayed for too long and has something it can potentially render, it will.