HTML的资源提示（Resource Hints）：“对第三方域名的连接优化 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

好的，让我们开始吧。

HTML 资源提示：<link rel='preconnect'> 对第三方域名的连接优化

大家好，今天我们来深入探讨 HTML 资源提示中的 <link rel='preconnect'>，以及它如何优化与第三方域名的连接，从而提升网站性能。

1. 资源提示（Resource Hints）概述

在深入了解 preconnect 之前，我们需要对资源提示有一个整体的认识。资源提示是一组 HTML 标签属性，旨在指示浏览器预先执行某些操作，以便更快地加载资源。这些操作包括 DNS 解析、TCP 连接、TLS 协商等，所有这些操作都会增加资源加载的延迟。

资源提示的主要类型包括：

preload: 指示浏览器预先加载指定的资源，因为该资源将在当前页面稍后使用。
prefetch: 指示浏览器预先获取指定的资源，因为该资源可能在后续页面中使用。
dns-prefetch: 指示浏览器预先执行指定域名的 DNS 解析。
preconnect: 指示浏览器预先建立与指定域名的连接。
prerender: 指示浏览器预先渲染指定的页面。

2. <link rel='preconnect'> 的作用机制

preconnect 的作用是告诉浏览器，我们计划从指定的域名获取资源，并希望浏览器提前建立连接。这意味着浏览器会在用户实际请求资源之前，预先执行以下操作：

DNS 解析: 将域名解析为 IP 地址。
TCP 连接: 建立与服务器的 TCP 连接。
TLS 协商 (如果使用 HTTPS): 协商 TLS 加密协议。

通过预先执行这些操作，我们可以显著减少资源加载的延迟，尤其是在与第三方域名建立连接时。因为第三方域名通常需要更长的连接时间。

3. <link rel='preconnect'> 的使用方法

preconnect 是一个 <link> 标签的 rel 属性值。我们需要在 HTML 的 <head> 标签中使用它，并指定 href 属性为目标域名的 URL。

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

href 属性: 指定要预先连接的域名。必须是有效的 URL。
crossorigin 属性 (可选): 如果从该域名获取的资源需要 CORS (跨域资源共享) 验证，则必须使用 crossorigin 属性。常用于字体文件。

4. crossorigin 属性的必要性

当从第三方域名加载字体文件时，crossorigin 属性是必不可少的。这是因为字体文件通常需要 CORS 验证。如果没有 crossorigin 属性，浏览器可能会拒绝加载字体文件。

crossorigin 属性可以有以下值：

anonymous: 指示浏览器使用匿名模式发送 CORS 请求。不会发送用户的 Cookie 或其他身份验证信息。
use-credentials: 指示浏览器使用用户的 Cookie 和其他身份验证信息发送 CORS 请求。

通常，对于字体文件，我们使用 crossorigin="anonymous"。

5. preconnect 的适用场景

preconnect 最适合以下场景：

第三方资源: 从第三方域名加载的资源，例如 CDN 上的 JavaScript 库、CSS 样式表、字体文件、图片等。
关键资源: 对页面渲染至关重要的资源。预先连接可以确保这些资源快速加载，从而改善用户体验。
延迟加载的资源: 虽然 preconnect 的目的是提前连接，但它也可以用于那些稍后才会加载的资源。即使资源不是立即需要，预先建立连接仍然可以减少整体加载时间。

6. preconnect 的最佳实践

只预连接必要的域名: 不要过度使用 preconnect。预连接会消耗浏览器资源，如果预连接了太多域名，可能会适得其反。只预连接那些对页面性能至关重要的域名。
在 HTML 的 <head> 中声明: 将 preconnect 标签放在 HTML 的 <head> 标签中，以便浏览器尽早开始建立连接。
与 dns-prefetch 结合使用: 如果只需要 DNS 解析，而不需要建立完整的 TCP 连接，可以使用 dns-prefetch。 dns-prefetch 的开销比 preconnect 更小。
考虑 HTTP/2 的连接复用: HTTP/2 允许在单个 TCP 连接上复用多个请求。如果服务器支持 HTTP/2，则预连接的优势可能会降低。
使用正确的 crossorigin 属性: 确保为需要 CORS 验证的资源使用正确的 crossorigin 属性。
测试和衡量性能: 使用浏览器开发者工具或性能测试工具来衡量 preconnect 对页面性能的影响。确保它确实提高了性能，而不是降低了性能。

7. 代码示例

以下是一些使用 preconnect 的代码示例：

预连接到 Google Fonts:

<link rel="preconnect" href="https://fonts.googleapis.com">
<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">

预连接到 CDN:

<link rel="preconnect" href="https://cdn.example.com">
<script src="https://cdn.example.com/script.js"></script>

预连接到图片服务器:

<link rel="preconnect" href="https://images.example.com">
<img src="https://images.example.com/image.jpg" alt="Image">

8. 与 dns-prefetch 的比较

dns-prefetch 和 preconnect 都是用于优化域名连接的资源提示，但它们的作用不同。

特性	`dns-prefetch`	`preconnect`
作用	仅执行 DNS 解析	执行 DNS 解析、TCP 连接、TLS 协商 (如果使用 HTTPS)
开销	较小	较大
适用场景	只需要 DNS 解析的域名	需要建立完整连接的域名
浏览器支持	较好	较好
使用方法	`<link rel="dns-prefetch" href="https://example.com">`	`<link rel="preconnect" href="https://example.com">`

通常，如果只需要 DNS 解析，可以使用 dns-prefetch。如果需要建立完整的连接，可以使用 preconnect。在某些情况下，可以同时使用 dns-prefetch 和 preconnect，以进一步优化性能。

9. 浏览器兼容性

preconnect 具有良好的浏览器兼容性。现代浏览器，包括 Chrome、Firefox、Safari 和 Edge，都支持 preconnect。可以使用 Can I Use 等网站来检查特定浏览器的兼容性。

10. 性能测试和分析

在实施 preconnect 之后，需要进行性能测试和分析，以确保它确实提高了页面性能。可以使用以下工具：

Chrome DevTools: Chrome DevTools 提供了一个强大的性能分析工具，可以用来测量页面加载时间、资源加载时间等。在 "Network" 标签中，可以查看每个资源的连接时间，从而了解 preconnect 的效果。
WebPageTest: WebPageTest 是一个在线性能测试工具，可以从不同的地理位置和浏览器测试网站的性能。它提供了详细的性能报告，包括连接时间、加载时间等。
Lighthouse: Lighthouse 是一个开源的自动化工具，用于改进 Web 应用程序的质量。它可以用来评估网站的性能、可访问性、最佳实践和 SEO。 Lighthouse 会提供关于 preconnect 使用情况的建议。

11. 实际案例分析

假设一个网站从 https://cdn.example.com 加载 JavaScript 文件。在没有 preconnect 的情况下，浏览器需要执行以下步骤：

DNS 解析 cdn.example.com。
建立与 cdn.example.com 的 TCP 连接。
协商 TLS 加密 (如果使用 HTTPS)。
发送 HTTP 请求。
接收 HTTP 响应。

如果使用 preconnect，浏览器可以在用户请求 JavaScript 文件之前，预先执行 DNS 解析、TCP 连接和 TLS 协商。当用户实际请求 JavaScript 文件时，浏览器可以直接发送 HTTP 请求，从而减少了加载延迟。

12. preconnect 与 HTTP/3 的关系

HTTP/3 是 HTTP 协议的最新版本，它使用 QUIC 协议作为传输层。 QUIC 协议具有以下优点：

更快的连接建立: QUIC 使用 UDP 协议，并且内置了 TLS 加密，因此可以更快地建立连接。
更好的抗丢包能力: QUIC 使用前向纠错 (FEC) 技术，可以更好地应对丢包情况。
更好的多路复用: QUIC 支持更好的多路复用，可以并发地发送多个请求。

由于 HTTP/3 具有更快的连接建立速度，因此 preconnect 的优势可能会降低。但是，preconnect 仍然可以用于预热连接，以便更快地加载资源。

13. 总结：快速连接，提升体验

preconnect 是一个强大的 HTML 资源提示，可以显著优化与第三方域名的连接，从而提升网站性能。通过预先建立连接，我们可以减少资源加载的延迟，改善用户体验。需要注意的是，应该合理使用 preconnect，只预连接那些对页面性能至关重要的域名。同时，要进行性能测试和分析，以确保 preconnect 确实提高了性能。

希望今天的讲解对大家有所帮助。

发表回复 取消回复

发表回复取消回复