rel="stylesheet"是加载css的强制要求，缺省或拼错均导致样式失效；rel="icon"需配合type和sizes才可靠；rel="preload"必须带as属性，rel="prefetch"不可替代；rel="noopener noreferrer"对无效。
rel="stylesheet" 是唯一能加载 CSS 的硬性要求
不写 rel="stylesheet"，哪怕 href 指向正确的 .css 文件，样式也完全不会生效——浏览器直接忽略该 <link> 标签。这不是兼容性问题，而是规范强制行为。
常见错误包括：
- 漏写 rel 属性，只写 <link href="main.css">
- 拼错值，比如写成 rel="style"、rel="css" 或大小写混用（rel="StyleSheet" 在部分旧环境可能失败）
- 把 rel="stylesheet" 用在非 CSS 资源上，例如指向 JS 或图片，浏览器会发起请求但因 MIME 类型不匹配而静默失败，控制台可能报 net::ERR_ABORTED 或 MIME type mismatch
必须满足三个条件才能让样式真正加载：
- rel="stylesheet" 显式声明
- href 指向可访问的 .css 文件路径（相对路径以 HTML 文件位置为基准）
- 标签置于 内，否则可能触发 FOUC（无样式内容闪烁）
rel="icon" 要配 sizes 和 type 才可靠
只写 <link rel="icon" href="/favicon.ico"> 看似能用，但现代浏览器会先尝试该路径，失败后 fallback 到根目录 /favicon.ico，多一次 DNS 查询和 404 请求，浪费资源。
真正可靠的写法必须同时提供：
- type：明确声明 MIME 类型，如 type="image/x-icon"（.ico）或 type="image/png"（.png）
- sizes：指定尺寸，如 sizes="16x16"、sizes="32x32"；对 .ico 文件可用 sizes="any"
- 多尺寸链式声明更稳妥，浏览器自动选最适配的
iOS 设备完全不识别 rel="icon"，必须额外加：
- <link rel="apple-touch-icon" href="/apple-touch-icon.png">
- 这个 href 不可省略，即使路径与 rel="icon" 相同，iOS 也不会复用
rel="preload" 和 rel="prefetch" 不能互换，且 as 是关键开关
rel="preload" 是高优先级、同步触发的强制预取；rel="prefetch" 是低优先级、空闲时才尝试的后台预取。两者语义和时机完全不同，混用会导致首屏卡顿或带宽浪费。
rel="preload" 必须带 as 属性，否则多数浏览器当普通链接处理，不触发预加载：
- as="font"：字体文件，跨域时必须加 crossorigin，否则静默失败，控制台无报错
- as="script" 或 as="style"：对应 JS 或 CSS，不写 as 就等于没写
- 错写 as="fonts"（复数）、as="css" 等无效值，同样失效
rel="prefetch" 不阻塞渲染，适合下一页可能用到的 JS chunk 或页面，但它不保证执行——用户还没点过去页面就关闭了，就不会下载。别把它当成“保险版 preload”。
rel="noopener noreferrer" 加在 上毫无意义
这两个值只对 <a target="_blank"></a> 有效，用于切断新页面对原页面 window.opener 的访问权限，并阻止 Referer 发送。写在 <link> 标签上，浏览器直接忽略，既不提升安全，也不影响任何行为。
典型误用：
- <link rel="stylesheet noopener" href="theme.css">
- <link rel="icon noreferrer" href="icon.png">
这类写法除了增加冗余字符，没有任何作用，还可能干扰后续维护判断。
真正需要安全控制的场景，只出现在外链跳转中；<link> 的 rel 值必须严格按用途选择，多一个无关词就多一分不可控风险。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
