preconnect通过提前建立第三方域名连接提升加载速度，需在head中添加link标签并合理使用crossorigin属性，适用于CDN、字体等跨域场景，避免对同源使用且不宜滥用，可与dns-prefetch共存实现渐进优化。
当你希望浏览器提前建立与第三方域名的连接以提升页面加载速度时，可以使用 rel="preconnect"。这个功能属于HTML的链接预加载机制之一，通过提前完成DNS解析、TCP握手，甚至TLS协商，减少后续资源请求的等待时间。
rel="preconnect" 是一个用于 <link> 标签的属性值，告诉浏览器：当前页面很可能需要从指定的外部域名获取资源，应尽早建立连接。
它不会下载资源，只是提前完成连接准备，适用于跨域请求场景，比如字体、CDN资源、API接口等。
在 中添加如下代码：
立即学习“前端免费学习笔记（深入）”；
<link rel="preconnect" href="https://cdn.example.com">
如果目标域名需要安全连接（HTTPS），建议加上 crossorigin 属性，避免匿名请求导致的连接重建：
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
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 的使用时机。掌握好这一点，性能优化就能更进一步。
以上就是HTML链接预连接怎么用_HTML链接relpreconnect属性解析的详细内容，更多请关注php中文网其它相关文章！
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
602
收藏
