preconnect 仅对首屏1秒内必发HTTPS请求的跨域域名有效，需置于head顶部、正确设置crossorigin，且总数不超过6个；应优先用于字体服务、主CDN和首屏API。
preconnect 不是给所有第三方 SDK 都加上的“性能开关”，它只对那些你**确定会在首屏 1 秒内发起 HTTPS 请求**的跨域域名起效；加错位置、漏掉 crossorigin、或对同源/HTTP 域名使用，它就完全不生效。
哪些第三方 SDK 域名值得加 preconnect
不是所有 SDK 都需要预连，只盯住「首屏强依赖 + 跨域 + HTTPS」这三点：
- Google Fonts 相关：必须同时加
https://fonts.googleapis.com和https://fonts.gstatic.com，且都带crossorigin—— 字体文件实际由后者返回，且响应头含Access-Control-Allow-Origin: * - 核心分析 SDK（如 Plausible、Umami）：如果 JS 是直接
<script src="https://plausible.io/js/script.js"></script>引入，且你确认首屏就加载，则对https://plausible.io加preconnect（不加crossorigin，纯静态 JS） - CDN 托管的首屏 JS/CSS：比如
https://cdn.example.net上放了main.css或vendor.js，且你在<head>里用<link rel="stylesheet">或<script src>立即引用，就该预连 - 首屏 API 域名：如
https://api.yourapp.com，且页面一渲染就执行fetch()获取用户信息或商品列表，也应加入 - 别碰广告、分享、客服弹窗这类 SDK 的域名——它们通常由用户交互触发，时间不确定，加了反而挤占连接名额
preconnect 必须写在 <head> 最顶部才起作用
浏览器流式解析 HTML，preconnect 提示得越早，TCP/TLS 握手越可能在真实请求发出前完成：
- ✅ 正确位置：紧贴
<head>开始，甚至在<meta charset>后、任何<link rel="stylesheet">或<script>之前 - ❌ 无效位置：放在
<body>里、动态用 JS 插入、或在<link rel="preload">后面 —— 浏览器直接忽略 - ⚠️ 同一域名多次声明，只有第一个生效，其余被丢弃；不要为了“保险”重复写
要不要加 crossorigin？不是可选，是行为开关
crossorigin 决定预建连接是否能被后续请求复用。不匹配，等于白连：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 必须加
crossorigin的场景：https://fonts.googleapis.com、https://fonts.gstatic.com、任何返回Access-Control-Allow-Origin头的 API 或字体 CDN - 可不加的场景：纯静态资源 CDN（如
https://cdn.jsdelivr.net），且你没显式用fetch(..., { credentials: 'include' }) - ❌ 错误写法：
crossorigin=""或crossorigin="anonymous"—— HTML 规范只接受空属性值，带等号会被解析失败 - ? 小技巧：如果拿不准，统一加上
crossorigin更稳妥；现代浏览器对匿名 CORS 连接支持良好
最多加几个？别超浏览器硬限制
Chrome 当前对 preconnect 并发数限制为 ≤6 个，每个连接都占用系统 socket 和 TLS 资源：
- 优先保 3–4 个最核心的：字体服务 + 主 CDN + 首屏 API，三者已覆盖多数 LCP 关键路径
- 别为 fallback CDN、备用统计域名、埋点上报域名额外占坑 —— 它们更适合用
dns-prefetch - 加太多反而拖慢：预连会抢占主站资源下载的 TCP 连接槽位，尤其在低端设备或弱网下更明显
- 验证是否生效：打开 Chrome DevTools → Network → Timing 标签页，筛选目标域名，看 “Connection Start” 时间是否显著提前（对比不加时）
真正容易被忽略的不是怎么写，而是判断“这个域名接下来 1 秒内是否必发请求”——很多团队把 preconnect 当成性能装饰品，堆了七八个却一个都没命中关键路径。
