会阻塞渲染，因浏览器需构建cssom才能合成渲染树；即使单行样式未加载完，页面也不绘制，且后续脚本执行也被阻塞。

外部样式表用 <link rel="stylesheet"> 引入时，浏览器默认会阻塞 HTML 解析和后续脚本执行，直到 CSS 加载并解析完成。

为什么 <link rel="stylesheet"> 会阻塞渲染

CSS 是渲染关键资源（render-blocking resource）：浏览器需要构建 CSSOM 才能确定元素样式，进而与 DOM 合成渲染树。即使 CSS 文件里只有一行 body { margin: 0 }，只要没加载完， 及之后的 HTML 就不会被绘制。

• 阻塞发生在 <link> 标签位置：它后面的 <script></script>（尤其是无 async/defer 的内联或同源脚本）会等待 CSSOM 就绪才执行
• 即使 CSS 文件 404，浏览器仍会等待超时（通常几秒）后才继续，页面表现为“白屏延迟”
• 多个 <link rel="stylesheet"> 按顺序串行加载（除非 HTTP/2 多路复用或预加载干预）

rel="preload" + as="style" 能提前加载但不阻塞

想让 CSS 提前下载、又不卡住 HTML 解析和 JS 执行，可以用 <link rel="preload"> 配合 onload 注入：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

<link rel="preload" href="main.css" as="style" onload="this.onload=null;this.rel='stylesheet'"><noscript><link rel="stylesheet" href="main.css"></noscript>

• rel="preload" 告诉浏览器“这个资源我马上要用”，触发高优先级下载，且完全不阻塞
• onload 在文件下载完成后立即将 rel 改为 "stylesheet"，触发 CSSOM 构建
• this.onload=null 防止重复执行；<noscript></noscript> 保底方案应对 JS 被禁用的情况
• 注意：preload 不支持跨域 CORS 样式表（除非服务端返回 Access-Control-Allow-Origin）

哪些场景下 <link rel="stylesheet"> 实际不阻塞？

不是所有 <link rel="stylesheet"> 都一定导致白屏，取决于位置和上下文：

• 放在 底部（如紧挨 ）：DOM 已基本解析完毕，此时加载 CSS 不影响首屏内容渲染，但可能造成样式闪动（FOUC）
• 配合 media 属性（如 media="(prefers-color-scheme: dark)"）：浏览器会异步加载该 CSS，不阻塞主流程 —— 但仅限媒体查询不匹配时才真正惰性加载
• 使用 title 属性定义可切换样式表（rel="stylesheet" title="theme"）：这类样式表默认禁用，不参与初始渲染，自然不阻塞
• HTTP/2 Server Push 曾可主动推送 CSS，但现代浏览器已普遍弃用，不可依赖

容易被忽略的细节：缓存头、DNS 预热和路径错误

很多“CSS 加载慢”问题其实和网络无关，而是配置或写法失误：

• Cache-Control: no-store 或 max-age=0 会让每次请求都走网络，即使文件没变 —— 生产环境应设合理缓存时间（如 max-age=31536000）并用内容哈希命名文件
• 未加 <link rel="dns-prefetch" href="//cdn.example.com">：若 CSS 在第三方 CDN，DNS 查询可能拖慢首字节（TTFB）
• href 路径错误（如多写一个 / 或少写 ./）导致 404：浏览器仍会等超时，控制台只报 404，但白屏原因难定位
• HTTPS 页面引入 HTTP 的 CSS（混合内容）：现代浏览器直接屏蔽，且不触发 onload 或 onerror，静默失败

最麻烦的是带内联 @import 的 CSS 文件 —— 它会让整个链路变成串行阻塞，比多个 <link> 更慢，且无法用 preload 拆解。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！