预连接技术实践与性能优化的真实经验分享

直接上手，预连接怎么用？

最近在优化一个项目的时候，发现页面加载速度有点慢。仔细分析后发现，某些第三方资源（比如字体、图片CDN）的DNS解析耗时比较长。这时候我就想到了预连接（preconnect）。直接看代码：

<link rel="preconnect" href="https://jztheme.com" crossorigin>

这段代码的作用是告诉浏览器：提前和指定的域名建立连接。这样可以减少后续请求时的DNS解析时间。

核心场景：什么时候用预连接最有效？

根据我的经验，以下几种场景特别适合用预连接：

• 第三方资源依赖较多的页面： 比如你用了Google Fonts、或者某个图片CDN服务。
• 跨域请求较多的页面： 如果你的API接口、静态资源分散在多个域名下。
• 首屏关键资源加载： 比如某个字体文件或者CSS文件，直接影响首屏渲染。

举个例子，假设你在用Google Fonts加载字体，可以直接这样：

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

这里注意下：crossorigin属性很重要，尤其是跨域资源。如果不加这个属性，可能会导致预连接失效。

踩坑提醒：这三点一定注意

虽然预连接看起来很简单，但在实际使用中我还是踩了不少坑，分享几个重要的点：

1. 不要滥用： 预连接并不是越多越好。每个预连接都会占用一定的系统资源，建议控制在3-5个以内。
2. 时机选择： 预连接最好放在标签里，越早越好。如果放得太晚，可能就失去了意义。
3. HTTPS是必须的： 预连接只支持HTTPS协议。如果你尝试对HTTP资源预连接，浏览器会直接忽略。

有一次我为了优化一个页面，一口气加了十几个预连接，结果发现页面加载反而变慢了。折腾了半天才发现是资源竞争的问题，后来删减到3个才恢复正常。

进阶技巧：动态预连接

有时候我们并不知道用户会访问哪些资源，这时候可以用JavaScript动态添加预连接：

const preconnect = (url) => {
  const link = document.createElement('link');
  link.rel = 'preconnect';
  link.href = url;
  link.crossOrigin = 'anonymous';
  document.head.appendChild(link);
};

// 示例：动态预连接
preconnect('https://jztheme.com');

这种方式特别适合SPA（单页应用），可以根据用户的操作提前加载相关资源。比如用户点击了一个按钮，你知道接下来会请求某个API，就可以提前预连接。

背后原理：预连接到底做了什么？

简单来说，预连接主要做了三件事：

1. DNS解析：提前将域名解析成IP地址。
2. TCP握手：建立TCP连接。
3. TLS协商（如果是HTTPS）：完成加密握手。

通过这些步骤，浏览器在真正发起请求时就可以跳过这些耗时的操作，从而加快加载速度。

拓展用法还有很多

除了预连接，其实还有其他类似的优化技术，比如：

• dns-prefetch：只做DNS解析。
• preload：提前加载关键资源。
• prefetch：提前加载未来可能用到的资源。

这些技术各有适用场景，后续我会继续分享这类博客。以上是我踩坑后的总结，希望对你有帮助！如果有更好的实践经验，欢迎评论区交流。