rel="stylesheet"是浏览器加载CSS的唯一强制指令，漏写或拼错（如styleSheet、css）会导致静默失效、页面白屏或FOUC；必须置于<head>中、配有效href且路径以HTML文件位置为基准。
rel="stylesheet"漏写或拼错，样式就静默失效
浏览器只认rel="stylesheet"这个精确值才加载 CSS；写成rel="styleSheet"、rel="css"或直接省略，都会被跳过——控制台不报错，页面白屏或 FOUC（闪屏）是唯一提示。
必须同时满足：在<head>内、带有效href、路径以 HTML 文件位置为基准。比如index.html里写href="css/main.css"，就是从index.html所在目录往下找css/文件夹。
- 多个
<link rel="stylesheet">按 HTML 中顺序级联，后加载的同选择器规则会覆盖前面的 -
disabled属性对它无效：设了disabled="true"仍会发请求，只是不应用样式 -
type="text/css"可省略，但若服务端没返回正确Content-Type，加上它可能触发兼容 fallback
rel="preload"必须配as，否则多数浏览器直接忽略
rel="preload"不是“保证加载”，而是告诉浏览器：“这个资源我马上就要，别等解析完再抓”。但它极度依赖as参数——没写、写错、或和实际资源类型不匹配，浏览器就当普通<link href>处理，失去高优先级。
常见组合：as="font"对应 WOFF2 字体、as="script"对应 JS、as="image"对应图片、as="style"对应 CSS。字体跨域时还必须加crossorigin，否则即使预加载成功，@font-face也会因 CORS 失败 fallback 到系统字体。
-
as="font"没配crossorigin→ 加载失败且不触发onerror - 给非关键图片加
rel="preload"→ 挤占主资源带宽，反而拖慢首屏 - 把字体写成
rel="prefetch"→ 首屏文字渲染卡顿，因为它是空闲时才加载
rel="noopener"只对target="_blank"有效，且必须小写无连字符
rel="noopener"的作用是在新页面打开瞬间切断window.opener引用链，防止 XSS 劫持。但它只在<a target="_blank">场景下生效；单独写在普通链接上，浏览器直接忽略。
Chrome 88+ 会自动补rel="noopener"，但 Safari 和 Firefox 不会——不能靠默认行为兜底。TikTok 2023 年就因此被利用过。
- 写成
rel="NOOPENER"或rel="no-opener"→ 无效，必须是全小写、无连字符 - 只写
target="_blank"不配rel→ 留下安全后门 -
rel="noreferrer"不等于rel="noopener"：旧版 Safari 中它不切断window.opener，不能替代
rel="prefetch"和rel="preconnect"用途完全不同，别混用
rel="prefetch"是低优先级后台预取，适合用户下一步可能访问的页面或 JS chunk；rel="preconnect"则是提前建立 TCP + TLS 连接，用于高频访问的第三方域名（如 CDN、字体服务），效果更直接但开销更大。
两者都只对真实会用到的域名有意义。对同一域名同时写dns-prefetch和preconnect是冗余的——后者已包含前者功能。
-
rel="prefetch"不会提升当前页性能，只服务于后续导航；误用作“提前加载首屏图片”毫无意义 -
rel="preconnect"不要滥用：对广告、统计等非关键域名，用rel="dns-prefetch"更稳妥，避免过早占用连接池 -
rel="canonical"设错会导致整站降权；它不是“推荐版本”，而是明确声明“这个 URL 才是唯一权威源”
<link>没rel就是废标签——哪怕href写得再准，浏览器也跳过解析。这不是兼容性问题，是规范强制行为。 
