90%的link标签加载失败源于浏览器安全策略拦截，核心排查点为file://协议限制、crossorigin配置缺失及rel属性拼写错误；双击打开HTML时因file://被视为null源，现代浏览器静默阻止CSS/JS加载，须启用本地HTTP服务（如python -m http.server）方可正常加载。
link 标签被阻止加载，90% 是浏览器安全策略主动拦截，不是网络或路径问题；核心排查点就三个：协议（file:// 还是 http://）、跨域配置（crossorigin + 服务端头）、rel 值是否拼错。
为什么双击打开 HTML 就不加载 CSS/JS？
file:// 协议下，现代浏览器（Chrome/Edge/Firefox）会直接拒绝加载 link 标签引入的跨源资源，哪怕路径完全正确。这不是报错，而是静默丢弃——Network 面板里看不到请求，控制台也不报错。
- 现象：
link rel="stylesheet" href="style.css"在双击打开时空白，但用python3 -m http.server或 Live Server 启动后立刻生效 - 根本原因：浏览器将
file://视为origin: null，所有 fetch、CSS 加载、字体、模块等都受同源策略封锁 - 临时验证：Chrome 启动加
--allow-file-access-from-files（仅调试，新版已逐步废弃） - 正解：必须走
http://localhost，哪怕只本地开发
跨域 CSS 加载失败却没报错？检查 crossorigin 和响应头
CDN 上的 CSS 文件（如 https://cdn.example.com/app.css）若没配 crossorigin，浏览器会静默忽略错误细节，onerror 事件里 event.target.href 读不到，document.styleSheets[0].cssRules 访问直接抛 SecurityError。
- 必须加
crossorigin="anonymous"，且服务端响应头要带Access-Control-Allow-Origin: *（或具体域名） - 只加
crossorigin但服务端没返回 CORS 头 → 样式表被丢弃，页面无样式，onerror可能不触发 -
crossorigin="use-credentials"要求服务端同时返回Access-Control-Allow-Credentials: true，否则预检失败 -
rel="icon"、rel="preload"加了crossorigin也无效，仅rel="stylesheet"和rel="modulepreload"支持
rel 值写错或大小写敏感导致“加载了但没效果”
rel 是 link 的行为开关，拼错、漏写、大小写混用，浏览器一律静默忽略——不发请求、不报错、DOM 里还存在该标签。
- 正确值只有
rel="stylesheet"（全小写，不能是styleSheet、css、StyleSheeT） -
rel="preconnect"写成rel="pre-connect"→ DNS 预连接失效 -
rel="modulepreload"写成rel="modpreload"→ 模块依赖不会被递归预取 - 验证方法：DevTools → Network → 看对应资源请求是否出现在 Waterfall 起始位置（TTFB 后 10ms 内）
动态插入 link 标签后样式不生效？别跳过浏览器调度机制
用 JS 创建 link 并 append 到 head，虽能加载，但等于放弃浏览器原生资源调度能力：DNS 预解析、early hint、server push 全部失效，FOUC（闪白）风险极高。
- 动态插入的
link不会触发preload提升优先级，也不会参与 CSSOM 构建时机优化 - 如果必须动态加载，
rel="stylesheet"的link应在 DOMContentLoaded 前完成插入，否则可能错过首屏渲染 -
rel="modulepreload"动态插入完全无效（浏览器只处理初始 HTML 中静态声明的） - 构建工具（Webpack/Vite）注入的
link常漏crossorigin，需手动补全或配置插件输出
最容易被忽略的是：rel 值拼写和 file:// 协议限制——它们不报错，不警告，只让一切“看起来正常地失败”。排查时先关掉所有插件、换浏览器、起本地服务，再看 Network 面板里那个本该出现却始终缺席的请求。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
