Why does a <link rel="stylesheet"> in the <head> delay a page's first paint, and what changes when you add media="print" to it?

## Why CSS blocks painting at all To paint anything, the browser needs a *render tree*: the DOM combined with the computed styles for each node. Computed style depends on every rule that might apply, and a rule that arrives late can change everything already on screen — colours, sizes, whether a node is displayed at all. If the browser painted before the CSS was in, users would see a burst of unstyled text and then a violent reflow. That is the flash of unstyled content, and browsers avoid it by holding the first paint until all render-blocking stylesheets are parsed. The key distinction people get wrong: a stylesheet blocks **rendering**, not **HTML parsing**. The parser keeps running behind the blocked paint, and a separate pre-load scanner races ahead of the parser to discover subresource URLs early, so images and scripts further down the document start downloading in parallel. ## The knock-on effect on scripts There is a second, indirect block. A classic `<script>` may call something like `getComputedStyle()`, so it must not run while a stylesheet is still pending. The browser therefore delays executing a script until the stylesheets that precede it have loaded — and a classic, non-deferred script that cannot execute also stalls the parser at that point. Ordering matters: ```html <head> <link rel="stylesheet" href="/big.css"> <script src="/app.js"></script> <!-- waits for big.css before it runs --> </head> ``` ## What the media attribute does `media` on a `<link>` carries a media query. The browser evaluates it up front: ```html <link rel="stylesheet" href="/base.css"> <link rel="stylesheet" href="/print.css" media="print"> <link rel="stylesheet" href="/wide.css" media="(min-width: 900px)"> ``` If the query does not currently match, the stylesheet is **not render-blocking**. Crucially it is still downloaded — the query can start matching later, when the user resizes the window or opens the print dialog, and the browser wants the rules ready. It is simply fetched at a lower priority, out of the critical path. This is why splitting CSS by media query helps a first paint even though total bytes are unchanged: only the matching subset gates the paint. It is also the mechanism behind the common asynchronous-CSS pattern, where a non-critical stylesheet is linked as `media="print"` and flipped to `media="all"` once it loads, so it lands after the first paint rather than before it. ## Inline <style> and <link> in the body An inline `<style>` block is render-blocking too, but with no network round trip — its rules are available as soon as the parser reaches the closing tag. That is why the critical rules for above-the-fold content are sometimes inlined while the rest is linked. A `<link rel="stylesheet">` placed in `<body>` is honoured by browsers even though `<head>` is its proper home, but it blocks rendering of the content that follows it and can produce visible restyling of content already painted above. Keep stylesheets in `<head>` unless you are deliberately doing progressive rendering. ## Explicit control with the blocking attribute The HTML Standard defines a `blocking` attribute, whose only current value is `render`. It lets you mark an element that would not otherwise be render-blocking as blocking — for example a deferred script that must run before the first paint. Support is uneven across engines; browsers that do not implement it ignore the attribute, so it degrades safely, but it is not a substitute for getting `media` and document order right. ## What an interviewer is checking That you can separate three different "blocking" claims and state each precisely: - Stylesheets block **painting**, not HTML parsing. - Stylesheets indirectly delay **script execution**, and a stalled classic script does block the parser. - A non-matching `media` value removes the paint block but not the download. A candidate who says "CSS blocks the parser" has the right instinct and the wrong mechanism; a candidate who says "media=print means it isn't downloaded" has a concrete factual error that shows up the moment they inspect the network panel.