How can the first paint occur before DOMContentLoaded?

Question

I was under the impression that the first paint occurs after DOMContentLoaded event has been fired. Especially, because I thought that in order for the first paint to happen the render tree is needed, which it is dependent on DOM construction. Also, I am aware that DOMContentLoaded event is fired when DOM construction completes. Until now, I thought that the order was:

• domInteractive
• deferred scripts execution
• DOMContentLoaded
• first paint
• load event

But then I came across this thread: "Why First Paint is happening before DOMContentLoaded" where people experience a different order. Unfortunately, I can't understand what am I missing out.

I am trying with tests to reproduce the first paint occurring before DCL event, although I believe this behaviour is against theory. If someone could help me out with a working example, it would be perfect!

Thank you in advance!

Answer 1

I think you're problem is you're trying to think of them as one neat-and-tidy sequence of events.

That's not actually how it works though. Each process going on is basically an async thing, firing off whenever it is ready. There isn't a strict and ordered sequence.

Painting is decoupled from the HTML, and for good reason.

Consider a really large HTML document. If you've ever loaded one on a slower network, you'll know that it'll start showing elements as they are ready, not necessarily waiting for the full HTML file to load.

Once the full HTML has been downloaded and parsed, that's when DOMContentLoaded is shown. A slow server could have actually taken quite a while to get that document, and it won't just sit on a white screen forever.

For many documents, especially small ones or ones that load really quickly, it may be that DOMContentLoaded fires first. On a larger one, it'll probably have a few paints before.