白屏常因link标签rel属性错误导致，必须严格使用rel="stylesheet"且与有效href配合置于head内；其他如大小写错误、漏写、放错位置、MIME类型不符或协议限制等均会静默失效。
rel="stylesheet" 漏写或拼错直接导致白屏
浏览器只认 rel="stylesheet" 这个固定值才真正加载并解析 CSS；写成 rel="styleSheet"、rel="css" 或干脆漏掉 rel，样式就静默失效——DOM 渲染照常进行，但页面没样式、没布局、内容塌陷或不可见，看起来就是白屏。
必须确保：rel="stylesheet" 与有效 href 同时存在，且 <link> 标签位于 内。放在 里虽不报错，但部分浏览器会延迟应用，首屏仍可能闪白或错位。
- 用 W3C Validator 验证 HTML，它会明确标出
Bad value X for attribute rel on element link - 检查构建产物（如 Vite/webpack 输出的 index.html），确认
rel没被插件误删或重写 - 本地双击打开时，即使
rel正确，也可能因file://协议下样式加载被拦截而白屏——这不是rel的问题，而是协议限制
link 加载失败却无报错，白屏静默发生
<link rel="stylesheet" href="main.css"> 返回 404 或超时，浏览器不会抛全局异常，window.onerror 捕获不到，控制台干净得很，但 CSSOM 无法构建，渲染树卡住，页面就停在白屏状态。
现代浏览器对 <link> 错误默认“静默忽略”，不像 <script></script> 那样至少触发 onerror 事件（除非你显式监听）。
立即学习“前端免费学习笔记（深入）”；
- 为每个关键样式表加
onerror回调：<link rel="stylesheet" href="main.css" onerror="this.href='fallback.css'"> - 避免使用协议相对路径（如
//cdn.com/a.css），HTTP/HTTPS 混用时会被浏览器主动拦截 - 检查 Network 面板中该
link请求的状态码和 MIME 类型：若返回text/plain或application/octet-stream，说明服务器没配对Content-Type: text/css
link 放错位置引发 FOUC 或白屏延长
把 <link rel="stylesheet"> 放在 底部，或紧挨着大量内联 JS，会导致浏览器先尝试渲染无样式的 DOM，再等样式加载完成重绘——出现 Flash of Unstyled Content（FOUC），严重时因重排阻塞造成视觉白屏感。
更糟的是，如果样式表体积大、网络慢，或被其他资源（如同步脚本）阻塞，首屏渲染时间直接拉长，用户看到的就是长时间空白。
- 首屏关键 CSS 必须内联：
<style>...</style>放在<head>顶部 - 非关键 CSS 用
<link rel="preload" as="style" href="non-critical.css" onload="this.rel='stylesheet'">+<noscript>降级兜底 - 禁用
@import：它在 CSS 文件内部引入其他样式，会串行加载，比<link>多一层阻塞
rel 其他取值误用导致资源未加载
rel 值不是随便写的，不同取值触发完全不同的浏览器行为。比如 rel="preload" 只预加载不执行，rel="prefetch" 是空闲时才加载，rel="icon" 仅用于 favicon——写错就等于告诉浏览器“这个资源不用管”，结果就是该加载的没加载，页面缺图标、缺字体、甚至关键 JS 被跳过。
典型误用：<link rel="preload" href="app.js" as="script"> 不会执行 JS，必须配合 onload 注入或后续 import() 调用；只写这行，JS 就永远不会运行。
- 查 MDN 的
<link rel>官方文档，确认你用的rel值是否支持你指定的as和资源类型 - 不要用
rel="stylesheet"加载 JS，也不要拿rel="modulepreload"当普通脚本用 - 服务端渲染（SSR）场景下，注意构建工具是否自动注入了重复或冲突的
link，比如同时输出内联 style 和外部 stylesheet link
最易被忽略的一点：白屏未必来自 JS 报错，link 的 rel 值、href 路径、响应头 Content-Type、以及浏览器对它的加载策略，四者只要一个没对上，就可能让页面停在空白状态，且不给你任何提示。
