When Do Scripts and Stylesheets Delay DOMContentLoaded?

DOMContentLoaded Trigger Definition

After an HTML document is fully loaded and parsed, the DOMContentLoaded event fires. External style sheets and images usually do not affect this event, though special cases exist.

Script Tags

The parsing behavior changes based on script attributes:

async : Executes as soon as the script is available. It does not block parsing while the resource is being fetched, but if the script finishes loading before parsing completes, it will block parsing at that point. It only has an effect when the

src

attribute is present.

defer : Defers execution until after the document has been parsed, guaranteeing no parsing blockage.

Therefore, a script does not affect parsing when it has the

defer

attribute, or when it has

async

and the script finishes loading after parsing is already complete.

External Stylesheets

Stylesheets generally do not block HTML parsing because they do not modify the DOM tree. However, when a stylesheet is followed by a script, the script may be blocked until the stylesheet loads.

1. Stylesheet Followed by a Script

<code>&lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;link rel="stylesheet" href="//8.idqqimg.com/edu/assets/css/common_css_e582a1d4.css"&gt;
    &lt;script&gt;console.log(121212)&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;p&gt;23233&lt;/p&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code>

Performance analysis in Chrome shows that the script execution (yellow "Evaluate Script" bar) occurs after the stylesheet parsing, indicating a parsing delay.

2. Stylesheet Not Followed by a Script

<code>&lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;script&gt;console.log(121212)&lt;/script&gt;
    &lt;link rel="stylesheet" href="//8.idqqimg.com/edu/assets/css/common_css_e582a1d4.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;p&gt;23233&lt;/p&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code>

Performance data shows the DCL line occurring almost simultaneously with the CSS request, confirming that the stylesheet does not block parsing in this case.

HTML5 Specification Insights

The parsing algorithm includes steps such as update document readiness (updating

readyState

and firing

readystatechange

), then traversing the pending script list. Scripts only execute after confirming that no stylesheet is blocking scripts (

has no style sheet that is blocking scripts

).

Only after these steps does the DOMContentLoaded event fire.

When a stylesheet blocks scripts, script execution is delayed, which in turn can delay parsing and the DOMContentLoaded event. User agents may choose to abort loading a stylesheet, but if a script queries style information before the stylesheet loads, it may receive default values, affecting page appearance.

Conclusion

Understanding how scripts and stylesheets affect document parsing helps developers optimize page load performance. Optimizations include removing render‑blocking JavaScript and improving CSS delivery.

Remove JS that blocks rendering

Optimize CSS delivery