CSS样式表加载始终为渲染阻塞吗？浏览器该行为是否有过变更？

浏览器始终默认将<link href="style.css" rel="stylesheet"/>这类常规样式表作为渲染阻塞资源——也就是必须等样式表加载解析完成后，才会渲染页面内容，这个核心行为从很早的浏览器版本就已经确立，并非近年才变更。

你看到的2012年用户“需要阻止内容提前显示”的问题，本质是当时存在一些特殊场景，导致浏览器出现了未样式化内容提前渲染（FOUC，无样式内容闪烁）的情况，常见原因包括：

• 网络环境差导致CSS加载超时，浏览器为了避免用户长时间空白，会 fallback 渲染未样式化的内容；
• 错误的资源加载顺序：比如把CSS放在页面底部，浏览器解析到HTML内容时还未加载到样式；
• 使用@import嵌套加载CSS，这种方式会导致样式加载延迟，容易触发提前渲染；
• 部分旧浏览器（比如旧版IE）的兼容性问题，对渲染阻塞的处理不够严格。

近年浏览器只是对渲染阻塞的细节做了优化，比如：

• 支持通过media属性实现条件阻塞：比如media="print"的样式表不会阻塞屏幕端的渲染；
• 新增preload等资源预加载方案，允许提前加载CSS但不阻塞渲染；
• 优化了资源加载优先级和超时逻辑，减少不必要的空白等待，但核心的“常规CSS默认阻塞渲染”规则从未改变。

内容的提问来源于stack exchange，提问作者dwjohnston