preconnect 标签必须置于<head>最顶部、紧接<meta charset>后，且需写对协议+域名格式、正确使用crossorigin属性，否则无效；动态插入、放<body>或含路径/参数的href均不触发连接。
preconnect 标签只有写对位置、写对格式、写对域名，浏览器才会真正执行连接；写错一行，等于没写。
preconnect 必须放在 <head> 最顶部，且不能动态插入
浏览器解析 HTML 是从上到下流式进行的，preconnect 要在解析到第一个 <script> 或 <link rel="stylesheet"> 之前就被看到，否则可能错过空闲连接窗口。Chrome 会立即发起 DNS + TCP + TLS 握手，但这个动作只发生在标签被 HTML 解析器“看见”的那一刻。
- 正确位置：紧接在
<meta charset>后，越靠前越好，例如：<head> <meta charset="utf-8"> <link rel="preconnect" href="https://fonts.gstatic.com"> <link rel="preconnect" href="https://cdn.example.com" crossorigin> <link rel="stylesheet" href="/main.css"> </head>
- 动态插入无效：
document.head.appendChild()添加的<link rel="preconnect">标签，浏览器完全无视 - 放在
<body>里或注释之后，同样不生效
href 值必须是协议+域名，不能带路径或查询参数
href 不是 URL，而是“连接目标标识符”。浏览器只取协议和域名部分做连接准备，其余一概截断或报错。
- 合法写法：
https://fonts.googleapis.com、https://cdn.jsdelivr.net、https://api.example.com - 非法写法：
https://fonts.googleapis.com/css（含路径）、https://cdn.example.com/?v=1（含查询参数）、//fonts.gstatic.com（协议相对地址，不支持） - HTTP 域名会被忽略：
http://example.com在现代 Chrome 中不会触发任何连接行为
crossorigin 属性不是可选开关，该加不加会导致连接白建
是否加 crossorigin，取决于后续资源请求是否带凭据（credentials）。如果目标资源响应头含 Access-Control-Allow-Origin，而你没加 crossorigin，浏览器会建一个“无凭据连接”，后续带凭据的请求（如字体、fetch 调用）无法复用它——等于预连接失败。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 必须加：
https://fonts.googleapis.com和https://fonts.gstatic.com（Google Fonts 字体需 CORS） - 建议加：
https://api.example.com（如果你的前端用fetch(..., { credentials: 'include' })） - 通常不加：
https://cdn.jsdelivr.net（公开静态资源，一般不需要凭据） - 禁止写成：
crossorigin=""—— 这是非法 HTML，属性值为空字符串会被浏览器忽略
别超 3–4 个，同一域名重复写只认第一个
Chrome 当前限制并发 preconnect 数为 6 个（含所有域名），每个连接还占用 TLS 握手 CPU 和网络资源。加太多不仅没收益，反而挤占真实资源请求的连接池。
- 优先级排序：只保留首屏必用的跨域域名，比如字体服务、CDN 主域、首屏 API 域名
- 同域名多次声明：
<link rel="preconnect" href="https://cdn.example.com">写两次，第二个被丢弃 - 旧版 Safari（preconnect，不报错也不生效，可搭配
<link rel="dns-prefetch">降级 - 如果目标域名 TLS 证书异常（如过期、域名不匹配），Chrome 控制台会报
net::ERR_CERT_COMMON_NAME_INVALID，且不会重试
最容易被跳过的点是：以为写了就一定生效，其实只要 href 多了一个斜杠、crossorigin 少了引号、或者放到了 <link rel="stylesheet"> 后面两行，整个预连接就失效了。验证时别只看 Network 面板有没有请求，要进 Timing 查 “Connection Start” 是否显著提前。
