在web 开发中，性能优化是一个关键环节，直接影响到用户体验和 SEO 排名。为了加速页面加载速度，开发者通常会采取多种措施，其中 DNS Prefetch 和 Preconnect 是两种重要的预连接技术，合理的使用好这两种技术，可以极大的提高前端页面的性能。
文章目录
DNS Prefetch 是一种提前解析 DNS 的技术。DNS（Domain Name System）是域名系统，将域名转换为 IP 地址，这是浏览器访问网络资源的第一步。默认情况下，浏览器会在请求一个资源时进行 DNS 查询，这个过程会增加额外的延迟，因为 DNS 查询需要花费时间。
DNS Prefetch 的作用是让浏览器在用户点击链接或请求资源之前提前完成 DNS 查询，从而减少因为 DNS 查询带来的延迟。这对于提升页面的响应速度非常重要，特别是在需要请求多个外部资源的情况下。
<link> 标签来实现 DNS Prefetch。具体的用法如下：<link rel="dns-prefetch" href="//example.com">example.com 的 DNS，即使用户还没有请求该域名上的任何资源。这意味着当用户真正需要访问 example.com 上的资源时，DNS 查询已经完成，可以直接进行连接，从而节省时间。Preconnect 是一种更高级的预连接技术，不仅包括 DNS 解析，还包括 TCP 握手和 TLS 协商。通过 Preconnect，浏览器可以在用户请求资源之前就建立好连接，从而进一步减少延迟。
当用户请求一个网络资源时，浏览器需要经历几个步骤：DNS 解析、TCP 握手和 TLS 协商。DNS 解析将域名转换为 IP 地址，TCP 握手建立客户端和服务器之间的连接，而 TLS 协商则确保连接的安全性。每个步骤都需要时间，特别是在安全连接（HTTPS）的情况下，TLS 协商可能会花费更多的时间。
Preconnect 通过提前完成这些步骤，确保当用户请求资源时，浏览器可以立即开始数据传输。这对于需要快速加载的关键资源非常有用，比如网页字体、API 请求等。
<link> 标签来实现。具体的用法如下：<link rel="preconnect" href="//example.com">example.com 建立连接，包括 DNS 解析、TCP 握手和 TLS 协商，从而确保在请求资源时能够更快地完成传输。尽管 DNS Prefetch 和 Preconnect 都是用来优化 web 性能的预连接技术，但它们有着不同的适用场景和优缺点。
<link> 标签即可，而且不会消耗太多的浏览器资源。在实际项目中，DNS Prefetch 和 Preconnect 可以结合使用，以实现最佳的性能优化效果。以下是一个结合使用的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web 性能优化</title>
<!-- DNS Prefetch -->
<link rel="dns-prefetch" href="//example-cdn.com">
<link rel="dns-prefetch" href="//example-ads.com">
<!-- Preconnect -->
<link rel="preconnect" href="//example-fonts.com" crossorigin>
<link rel="preconnect" href="//example-api.com">
</head>
<body>
<h1>优化 Web 性能</h1>
</body>
</html>example-cdn.com 和 example-ads.com 会进行 DNS Prefetch，而 example-fonts.com 和 example-api.com 则会进行 Preconnect。这种结合使用的方法可以最大化地提升页面加载速度。假设一个网页包含以下资源：
example-cdn.com 加载图片example-ads.com 加载广告example-fonts.com 加载字体example-api.com 请求数据如果没有使用任何预连接技术，当用户访问网页时，浏览器需要逐一进行 DNS 查询、TCP 握手和 TLS 协商，这会增加页面加载的延迟。而通过 DNS Prefetch 和 Preconnect，浏览器可以提前解析和建立这些连接，从而大大减少用户等待时间。
DNS Prefetch 和 Preconnect 是提升 web 性能的重要工具，通过提前解析 DNS 和建立连接，可以显著减少资源加载的延迟。理解和合理使用这两种技术，能够有效改善用户体验和网站的整体性能。