title: Are deferred scripts executed before DOMContentLoaded event?
body: <p>Upon defer attribute <a href="https://developer.mozilla.org/en/docs/Web/HTML/Element/script#Attributes" rel="noreferrer">MDN says</a>:</p>
  <blockquote>
  <p>This Boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed, but <strong>before firing DOMContentLoaded</strong>. The defer attribute should only be used on external scripts.</p>
  </blockquote>
  <p>On <code>DOMContentLoaded</code> <a href="https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded" rel="noreferrer">MDN also says</a>:</p>
  <blockquote>
  <p>The DOMContentLoaded event is fired when the initial HTML document has been completely loaded and parsed, without <strong>waiting for stylesheets</strong>...</p>
  </blockquote>
  <p>So <code>DOMContentLoaded</code> is fired before <code>CSSOM</code> is ready. This means deferred scripts are <em>executed</em> before <code>CSSOM</code> is ready. But if that's true the scrips must not be able to get correct CSS property values and must not apply CSS correctly. But it's not true, we know all deferred scripts work well.</p>
  <ol>
  <li>So is MDN documentation technically incorrect?</li>
  <li>Where can I find the official documentation of DOMContentLoaded`? I searched in <a href="https://dom.spec.whatwg.org/" rel="noreferrer">https://dom.spec.whatwg.org/</a> but couldn't find it.</li>
  </ol>
  <p>P.S: Please note that <a href="https://developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crp" rel="noreferrer">google says</a> that CSSOM is built before executing any inline javascript</p>
  <p><a href="https://i.stack.imgur.com/uWj3S.png" rel="noreferrer"><img src="https://i.stack.imgur.com/uWj3S.png" alt="enter image description here" /></a></p>
  <p>But Google is technically incorrect. Inline JavaScript gets executed before CSSOM is ready. And from my tests, I found that MDN is correct and if js files(both deferred and non-deferred) are downloaded before CSS files(or js is inline) then js is executed before CSSOM is ready. So js might handle styles incorrectly. To avoid that we need a forced reflow before all js logic.</p>
  <p>So if a user visits our website with all js required already cached and CSS not cached OR js gets downloaded before CSS then (s)he might see an incorrectly rendered page. To avoid this we should add force reflow in all our websites' js files.</p>