JavaScript内核与高级编程之：`JavaScript`的`DNS`预取和预连接：其在网络性能优化中的应用。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众老爷，晚上好！今天咱来聊聊前端性能优化里容易被忽略，但效果又很显著的两位好兄弟：DNS 预取 (DNS Prefetching) 和预连接 (Preconnect)。这俩哥们儿，虽然名字听起来有点高深，但用起来特别简单，能有效缩短页面加载时间，提升用户体验。保证大家听完之后，也能像庖丁解牛一样，轻松玩转它们。

一、开胃小菜：网络请求的流程

在深入了解 DNS 预取和预连接之前，咱们先简单回顾一下浏览器发起一个网络请求的流程，这有助于理解它们的作用。假设你正在浏览 www.example.com 上的网页，浏览器需要经历以下步骤才能获取资源：

DNS 解析 (DNS Lookup)： 浏览器首先需要将域名 www.example.com 转换为服务器的 IP 地址。就像你要去朋友家，首先要知道他家的具体地址一样。这个过程就是 DNS 解析，由 DNS 服务器完成。
TCP 连接 (TCP Handshake)： 拿到 IP 地址后，浏览器会与服务器建立 TCP 连接，这是一个三次握手的过程。类似于打电话，先拨号，对方接听，确认双方可以正常通话。
TLS 协商 (TLS Handshake)： 如果网站使用 HTTPS，则需要进行 TLS 握手，建立安全的加密连接。这好比通话时加密，防止窃听。
发送 HTTP 请求 (HTTP Request)： 连接建立后，浏览器就可以发送 HTTP 请求，向服务器请求资源。就像电话接通后，你开始和朋友聊天。
服务器处理请求 (Server Processing)： 服务器接收到请求后，进行处理并生成响应。
发送 HTTP 响应 (HTTP Response)： 服务器将包含资源内容的 HTTP 响应发送回浏览器。
浏览器渲染 (Browser Rendering)： 浏览器接收到响应后，解析 HTML、CSS、JavaScript 等资源，并渲染页面。

二、DNS 预取：未雨绸缪的先知

DNS 预取，顾名思义，就是在浏览器真正需要某个域名对应的 IP 地址之前，提前进行 DNS 解析。这样，当浏览器真的需要访问该域名时，就可以直接使用已经解析好的 IP 地址，而无需等待 DNS 解析过程，从而节省时间。

想象一下，你去餐厅吃饭，提前知道要点的菜，就先让服务员去厨房准备，等你坐下的时候，菜已经快上桌了，是不是很爽？ DNS 预取就是干这个的。

如何使用 DNS 预取？

有两种方式可以启用 DNS 预取：

Link 标签： 这是最常用的方法，通过在 HTML 文档的 <head> 标签中添加 <link> 标签来指定需要预取的域名。
```
<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
  <link rel="dns-prefetch" href="//fonts.googleapis.com">
  <link rel="dns-prefetch" href="//cdn.example.com">
</head>
<body>
  
</body>
</html>
```
rel="dns-prefetch" 告诉浏览器这是一个 DNS 预取链接。 href 属性指定需要预取的域名。注意 href 属性的值必须是完整的域名，包括协议 (例如 //表示使用当前页面的协议)。
HTTP 头部： 也可以通过在 HTTP 响应头部中添加 X-DNS-Prefetch-Control 字段来控制 DNS 预取。
```
X-DNS-Prefetch-Control: on
```
X-DNS-Prefetch-Control: on 启用 DNS 预取。这种方式允许服务器控制客户端的 DNS 预取行为，但不如 <link> 标签灵活。

使用 DNS 预取的注意事项：

只预取必要的域名： 过多的 DNS 预取会浪费资源。应该只预取那些确定会用到的域名，例如 CDN、字体服务器、第三方 API 等。
现代浏览器的默认行为： 现代浏览器通常会自动进行 DNS 预取，但显式地使用 <link> 标签可以确保预取行为更加可控和可靠。
HTTPS 和 DNS 预取： 对于 HTTPS 网站，DNS 预取仍然有效。浏览器会自动处理 HTTPS 连接所需的 TLS 协商。
安全性问题： 某些情况下，DNS 预取可能会暴露用户的浏览历史。可以通过设置 X-DNS-Prefetch-Control: off 来禁用 DNS 预取，但通常不建议这样做，因为 DNS 预取带来的性能提升远大于潜在的风险。

代码示例：

假设你的网站使用了 Google Fonts 和一个 CDN 来托管静态资源。你可以在 HTML 文档的 <head> 标签中添加以下代码：

<!DOCTYPE html>
<html>
<head>
  <title>My Awesome Website</title>
  <link rel="dns-prefetch" href="//fonts.googleapis.com">
  <link rel="dns-prefetch" href="//cdn.example.com">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Welcome to My Website!</h1>
  <img src="//cdn.example.com/images/logo.png" alt="Logo">
  <p>This is a sample website.</p>
  <script src="script.js"></script>
</body>
</html>

这样，浏览器就会提前解析 fonts.googleapis.com 和 cdn.example.com 的 IP 地址，从而加快字体和静态资源的加载速度。

三、预连接：直达快车的VIP通道

预连接，顾名思义，就是在浏览器真正需要向某个服务器发起请求之前，提前建立连接，包括 DNS 解析、TCP 握手和 TLS 协商 (如果使用 HTTPS)。这样，当浏览器真的需要访问该服务器时，就可以直接发送请求，而无需等待连接建立过程，从而大大节省时间。

预连接就像为你准备了一条直达目的地的VIP通道，省去了排队等待的时间。

如何使用预连接？

预连接同样可以通过 <link> 标签来实现：

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
  <link rel="preconnect" href="https://cdn.example.com">
</head>
<body>
  <!-- 页面内容 -->
  <img src="https://cdn.example.com/images/logo.png" alt="Logo">
</body>
</html>

rel="preconnect" 告诉浏览器这是一个预连接链接。 href 属性指定需要预连接的服务器地址。

预连接的类型：

rel="preconnect" 实际上可以进一步细分为几种类型，它们分别代表不同的预连接级别：

preconnect： 这是最常用的预连接类型，它会执行 DNS 解析、TCP 握手和 TLS 协商 (如果使用 HTTPS)。
dns-prefetch： 仅执行 DNS 解析，不建立 TCP 连接。前面已经介绍过。
preload： 用于预加载关键资源，例如字体、图片、脚本等。虽然它也涉及连接建立，但主要目的是为了尽早下载资源，而不是单纯地建立连接。
prefetch： 用于预获取后续页面可能需要的资源。它通常用于优化 SPA (单页应用) 的性能。

预连接的注意事项：

谨慎使用： 预连接会消耗一定的系统资源，包括 CPU、内存和带宽。过多的预连接可能会适得其反，降低性能。因此，应该只对那些确定会使用的服务器进行预连接。
跨域问题： 如果要预连接到跨域服务器，需要确保服务器允许跨域访问，否则预连接可能会失败。可以通过设置 CORS (跨域资源共享) 头部来允许跨域访问。
HTTP/2 的优势： HTTP/2 协议支持多路复用，允许在同一个 TCP 连接上发送多个请求。这使得预连接的优势相对减小，因为浏览器可以更有效地利用现有的连接。但是，预连接仍然可以缩短首次请求的延迟。
与 Service Worker 配合使用： Service Worker 可以拦截网络请求，并从缓存中返回资源。如果 Service Worker 已经缓存了某个资源，那么预连接可能就没有必要了。

代码示例：

假设你的网站使用了一个第三方 API 来获取数据，并且这个 API 的域名是 api.example.com。你可以在 HTML 文档的 <head> 标签中添加以下代码：

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
  <link rel="preconnect" href="https://api.example.com">
</head>
<body>
  <h1>Welcome to My Website!</h1>
  <button id="getDataButton">Get Data</button>
  <div id="dataContainer"></div>
  <script>
    const getDataButton = document.getElementById('getDataButton');
    const dataContainer = document.getElementById('dataContainer');

    getDataButton.addEventListener('click', () => {
      fetch('https://api.example.com/data')
        .then(response => response.json())
        .then(data => {
          dataContainer.textContent = JSON.stringify(data);
        });
    });
  </script>
</body>
</html>

这样，当用户点击 "Get Data" 按钮时，浏览器就可以直接发送请求到 api.example.com，而无需等待连接建立过程，从而加快数据加载速度。

四、DNS 预取 vs 预连接：哥俩的区别

虽然 DNS 预取和预连接都是为了优化网络性能，但它们的作用范围不同：

特性	DNS 预取 (DNS Prefetching)	预连接 (Preconnect)
作用	提前解析域名对应的 IP 地址	提前建立连接 (DNS 解析、TCP 握手、TLS 协商)
范围	仅限于 DNS 解析	包括 DNS 解析、TCP 握手和 TLS 协商 (如果使用 HTTPS)
资源消耗	较低	较高
适用场景	确定会使用的域名	确定会使用的服务器
使用方式	`<link rel="dns-prefetch">`	`<link rel="preconnect">`

简单来说，DNS 预取只做了 "知己知彼" 的第一步，预连接则更进一步，连 "握手言和" 的步骤都提前完成了。

五、案例分析：实战演练

咱们来分析一个实际的案例，看看 DNS 预取和预连接是如何提升网站性能的。

假设你的网站使用了以下资源：

Google Fonts 字体文件
Cloudflare CDN 上的 JavaScript 文件
一个第三方 API，用于获取用户数据

你可以通过以下方式来优化网站性能：

DNS 预取 Google Fonts 和 Cloudflare CDN：

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
  <link rel="dns-prefetch" href="//fonts.googleapis.com">
  <link rel="dns-prefetch" href="//cdnjs.cloudflare.com">
</head>
<body>
  <!-- 页面内容 -->
</body>
</html>

这将提前解析 fonts.googleapis.com 和 cdnjs.cloudflare.com 的 IP 地址。

预连接到第三方 API：

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
  <link rel="preconnect" href="https://api.example.com">
</head>
<body>
  <!-- 页面内容 -->
</body>
</html>

这将提前建立到 api.example.com 的连接。

通过以上优化，可以显著缩短页面加载时间，提升用户体验。

六、总结：小技巧，大效果

DNS 预取和预连接是两个简单而有效的性能优化技巧，可以显著缩短页面加载时间，提升用户体验。虽然它们不能解决所有性能问题，但可以作为优化策略的重要组成部分。

记住，优化是一个持续的过程，需要不断地分析和调整。善用 DNS 预取和预连接，让你的网站飞起来！

今天的分享就到这里，感谢各位的观看！希望大家都能学有所获，并在实际项目中灵活运用这些技巧。如果有任何问题，欢迎随时提问。拜拜！

发表回复 取消回复

发表回复取消回复