preconnect 只对几秒内必发的 HTTPS 第三方请求有效，需满足位置（head 最顶部）、协议（完整 HTTPS）、CORS（正确 crossorigin）三重约束，加错反而拖慢首屏。
preconnect 不是“加了就快”，而是“加对了才省 200–600ms，加错了反而拖慢首屏”。它只对几秒内必发的 HTTPS 第三方请求起效，且必须满足位置、协议、CORS 三重约束。
preconnect 必须写在 最顶部才生效
浏览器流式解析 HTML，preconnect 提示只有在遇到第一个外部资源（比如 <link rel="stylesheet"> 或 <script src>）前被读到，才来得及发起 DNS+TCP+TLS 预连接。晚一行都可能失效。
- ✅ 正确位置：
<head><meta charset="utf-8"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>（紧贴<meta charset>后） - ❌ 无效位置：放在
<link rel="stylesheet">后面、<body>里、或用 JS 动态插入（document.head.append()） - ⚠️ 同一域名重复声明，只有第一个生效；多余标签会被浏览器静默丢弃
href 必须是完整 HTTPS 协议 + 域名，不能带路径
href 不是资源地址，只是连接目标。带路径、参数或缺协议，浏览器直接忽略该标签，Network 面板里根本看不到对应预连接记录。
- ✅ 正确写法：
https://cdn.example.com、https://fonts.googleapis.com - ❌ 错误写法：
//cdn.example.com（协议相对，降级为dns-prefetch行为）、https://cdn.example.com/main.js（含路径）、http://api.example.com（HTTP 被 Chrome 直接忽略） - ⚠️ 同源地址（如
https://your-site.com）加了也无效——浏览器自动复用连接，不额外建连
crossorigin 属性不是可选，是复用开关
漏写或写错 crossorigin，会导致预建的 TLS 连接无法被后续请求复用。浏览器把“带凭据”和“无凭据”连接视为两个完全隔离的池子。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- ✅ 必须加：
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>（字体强制 CORS）、<link rel="preconnect" href="https://api.example.com" crossorigin>（fetch 带credentials: 'include'或服务端返回Access-Control-Allow-Origin） - ✅ 可不加但加了也无害：纯静态 CDN（如
https://cdn.jsdelivr.net），且你没显式传凭据 - ❌ 错误写法：
crossorigin=""（非法 HTML，被忽略）、crossorigin="anonymous"（带等号，部分解析器降级或报错）
最多配 3～4 个，优先保首屏真实加载的域名
Chrome 对 preconnect 并发数硬性限制为 6，但还要给字体、分析 SDK 留位置。加太多会抢占主域连接槽位，反而阻塞关键资源。
- ✅ 推荐组合：
https://fonts.googleapis.com、https://fonts.gstatic.com、https://cdn.example.com、https://api.example.com - ❌ 别加：用户点击后才加载的客服 SDK、广告域名、备用 CDN（如
backup.cdn.example.com）、HTTP 域名、子域名不一致（写了api.example.com却请求v2.api.example.com） - ⚠️ 同一主域下的多个子域（如
cdn1.example.com和cdn2.example.com）若共用权威 DNS，加一个就够了；否则需分别声明，但各自占一个名额
真正难的不是写几行 <link rel="preconnect">，而是判断「这个域名接下来 1 秒内是否确定会发 HTTPS 请求」——这需要结合 Network 面板 Timing 数据、JS 执行时机和服务端 CORS 配置交叉验证，缺一不可。
