rel="noopener"必须与target="_blank"配合使用，否则新页面可通过window.opener劫持原页面；它在浏览器解析阶段直接将新页面window.opener设为null，从源头切断引用链。
target="_blank" 不加 rel="noopener" 就是留后门
只要用了 target="_blank"，就必须配 rel="noopener"，否则新页面能通过 window.opener 直接跳转或篡改原页。这不是理论风险——TikTok 2023 年就因此被利用过。
常见错误包括：
- 只写 target="_blank"，完全没提 rel
- 写成 rel="NOOPENER" 或 rel="no-opener"（必须小写、无连字符）
- 把 rel="noopener" 单独用在没 target="_blank" 的链接上（无效，浏览器忽略）
Chrome 88+ 默认给 target="_blank" 补 noopener，但 Safari 和 Firefox 不会。别依赖这个“默认”，显式写才可靠。
rel="noreferrer" 不只是隐私开关，还影响 Referer 策略
rel="noreferrer" 会让浏览器不发 Referer 请求头，目标站看不到你从哪来；但它在部分旧版 Safari 中不切断 window.opener，所以不能代替 noopener。
更可控的替代方案是用 referrerpolicy 属性：
- 想彻底不发 Referer → referrerpolicy="no-referrer"
- 同域照常发、跨域不发 → referrerpolicy="strict-origin-when-cross-origin"
- rel="noreferrer" 等价于 referrerpolicy="no-referrer"，但不可逆、粒度粗
rel="preload" 和 rel="prefetch" 别混用，行为天差地别
rel="preload" 是高优先级、强制同步加载，必须带 as 参数（如 as="script" 或 as="font"），否则多数浏览器直接忽略；rel="prefetch" 是低优先级后台预取，不阻塞渲染，适合下一屏可能访问的资源。
典型误用：
- 给字体写 rel="prefetch" → 首屏文字渲染卡顿
- 给非关键图片加 rel="preload" → 挤占主资源带宽
- rel="preload" 加了 as="font" 但没开 CORS → 加载失败且不触发 onerror
link 标签没 rel 就是废标签
<link> 没 rel 属性，浏览器直接跳过解析——哪怕写了 href 也白搭。比如 <link href="theme.css"> 不会加载 CSS。
必须显式声明：
- rel="stylesheet" 全兼容，但必须写
- rel="icon"、rel="alternate" 等值支持度不一（如 rel="search" 在 Safari 不生效）
- 多个 rel="stylesheet" 按 HTML 中顺序级联，后加载的样式可覆盖前面同选择器规则
注意：disabled 属性对 <link rel="stylesheet"> 无效——设了 disabled="true" 仍会发起请求，只是不应用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
