preconnect通过提前建立第三方域名连接提升加载速度，需在head中添加link标签并合理使用crossorigin属性，适用于cdn、字体等跨域场景，避免对同源使用且不宜滥用，可与dns-prefetch共存实现渐进优化。
当你希望浏览器提前建立与第三方域名的连接以提升页面加载速度时，可以使用 rel="preconnect"。这个功能属于HTML的链接预加载机制之一，通过提前完成DNS解析、TCP握手，甚至TLS协商，减少后续资源请求的等待时间。
什么是 preconnect
rel="preconnect" 是一个用于 <link> 标签的属性值，告诉浏览器：当前页面很可能需要从指定的外部域名获取资源，应尽早建立连接。
它不会下载资源，只是提前完成连接准备，适用于跨域请求场景，比如字体、CDN资源、API接口等。
如何使用 preconnect
在 中添加如下代码：
立即学习“前端免费学习笔记（深入）”；
<link rel="preconnect" href="https://cdn.example.com">
如果目标域名需要安全连接（HTTPS），建议加上 crossorigin 属性，避免匿名请求导致的连接重建：
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
适用场景和注意事项
- 用于频繁访问的第三方服务，如 Google Fonts、CDN 静态资源、远程 API 域名。
- 不要对当前页面主源（same-origin）使用 preconnect，浏览器已优化同源连接。
- 避免滥用，每个 preconnect 都会消耗系统资源，建议只保留关键域名。
- 若后续没有实际请求，预连接会在一段时间后关闭，造成轻微浪费。
与其他预加载方式对比
dns-prefetch：仅提前做 DNS 解析，开销最小，兼容性最好，适合老旧浏览器降级使用。
preconnect：完整连接准备（DNS + TCP + TLS），效果更强，但资源消耗略高。
两者可共存，作为渐进式优化：
<link rel="dns-prefetch" href="https://api.example.com"><link rel="preconnect" href="https://api.example.com" crossorigin>
基本上就这些。合理使用 preconnect 能有效缩短资源加载延迟，尤其在移动端或网络较慢的环境下更为明显。不复杂但容易忽略细节，比如 crossorigin 的使用时机。掌握好这一点，性能优化就能更进一步。
