在网页加载流程中，加载第三方资源前需要先完成DNS查询、TCP握手、TLS协商等步骤，这些操作会消耗不少时间。HTML的rel=preconnect属性可以让浏览器提前和指定的源建立连接，省去后续加载资源时的连接建立耗时，是前端性能优化的常用手段。下面我们就详细了解它的使用方法。
rel=preconnect的作用原理
当浏览器解析到带有rel=preconnect的<link>标签时，会立即开始和目标源建立连接，包括以下步骤：
- DNS解析：将域名解析为对应的IP地址
- TCP连接：和目标服务器建立TCP三次握手
- TLS握手：如果是HTTPS资源，完成TLS加密协商
这些操作会在浏览器空闲时提前完成，等后续真正需要加载该源的资源时，就可以跳过这些步骤，直接传输数据，从而加快资源加载速度。
rel=preconnect的基本用法
只需要在HTML的<head>区域添加<link>标签，设置rel为preconnect，href为目标资源的源地址即可。示例如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>rel=preconnect使用示例</title>
<!-- 预连接到cdn.ipipp.com，后续加载该CDN的资源会更快 -->
<link rel="preconnect" href="https://cdn.ipipp.com">
<!-- 如果需要跨域资源也提前建立连接，可添加crossorigin属性 -->
<link rel="preconnect" href="https://api.ipipp.com" crossorigin>
</head>
<body>
<script src="https://cdn.ipipp.com/jquery.min.js"></script>
</body>
</html>使用注意事项
1. 仅预连接源地址
href属性只需要填写源地址即可，不需要写完整的资源路径，比如要预连接https://cdn.ipipp.com/lib/vue.js，只需要写https://cdn.ipipp.com。
2. 跨域资源需要加crossorigin
如果目标源是跨域的，比如加载其他域名的字体、接口资源，需要给<link>标签添加crossorigin属性，否则预连接可能不生效。
3. 不要过度使用
浏览器对同一时间处理的预连接数量有限制，过度使用会占用浏览器资源，反而影响性能。一般建议只对接下来很快就会用到的核心资源源地址使用，数量控制在3-5个以内。
rel=preconnect和rel=dns-prefetch的区别
很多人会混淆这两个属性，它们的区别如下：
| 属性 | 作用范围 | 适用场景 |
|---|---|---|
| rel=dns-prefetch | 仅提前完成DNS解析 | 针对低优先级的第三方资源，只需要提前解析域名即可 |
| rel=preconnect | 完成DNS解析、TCP连接、TLS握手 | 针对高优先级、即将加载的第三方资源，需要完整提前建立连接 |
实际效果验证
我们可以在Chrome浏览器的开发者工具中，切换到Network面板，勾选Disable cache，然后刷新页面，查看资源的Timing信息。使用了rel=preconnect的资源，其Queueing、Stalled等连接相关的耗时会有明显减少，证明预连接起到了作用。
合理使用rel=preconnect可以有效优化页面加载性能，尤其是在页面依赖多个第三方资源的情况下，效果会更加明显。开发者可以根据页面的实际资源加载情况，选择合适的目标源进行预连接配置。
HTMLrel_preconnect链接预连接前端性能优化修改时间：2026-05-31 23:21:23