Parse HTML and CSS

The browser parses HTML into the DOM and CSS into the CSSOM while discovering scripts, stylesheets, fonts, images, and preload hints. CSS can block rendering because style is needed before first paint, and parser-blocking scripts can pause HTML parsing unless deferred, async, or modular loading changes the behavior.

					<link rel="stylesheet" href="/app.css">
<script defer src="/app.js"></script>
				

`defer` preserves order and runs after parse; `async` downloads in parallel and runs when ready. Module scripts defer by default. Preload warms critical assets; over-preloading competes with LCP resources.

On interviews: connect resource order to first render, hydration timing, and why defer is often safer than inline blocking scripts.

Common pitfalls: preloading everything increases contention. Async scripts can execute out of order and break dependencies.

The trade-off is convenience versus control — pick the mechanism that matches your coupling and performance budget.

Checklist:

• Know DOM and CSSOM construction.
• Identify render-blocking CSS and scripts.
• Choose script loading mode per dependency graph.
• Measure first render after reordering.