3

From MDN, I know DOMContentLoaded would not wait for stylesheets.

The DOMContentLoaded event is fired when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.

But from varvy.com and also from google

A common misconception is that styles have no bearing on domContentLoaded, but that is untrue according to the W3 HTML5 specification

domContentLoaded: marks the point when both the DOM is ready and there are no stylesheets that are blocking JavaScript execution - meaning we can now (potentially) construct the render tree.

domContentLoaded typically marks when both the DOM and CSSOM are ready.

So, which one is right? and what'is the stylesheet that is blocking script?

Community
  • 1
  • 1
ygjack
  • 53
  • 6

1 Answers1

2

All inline Javascripts must be executed, because they can affect dom.. document.write for example. And if JS access some CSS not yet loaded.. another way to say that is "CSS is blocking JS".. So.. DOM wait for JS that waits for CSS to load.

DOM ----(wait for)---> JS ----(wait for)---> CSS

Another way to put it:

DOM <---(blocking)--- JS <---(blocking)---- CSS

Therefore blocking CSS must be loaded before domContentLoaded! After that there are no stylesheets that are blocking JavaScript execution! Now that in bold make sense?

CSSOM are ready means it is ready to be used by DOM, so that CSS not used by dom may continue to load.

Is missconceptions dissolved now?