预连接Preconnect详解：提升网站性能的关键技巧

让我们深入探讨预连接Preconnect——这一强大的资源提示技术，解析其工作原理、应用场景、真实案例，以及如何通过审计和优化实现性能提升。

什么是预连接？

预连接是一种资源提示，它指导浏览器主动与尚未确定需要访问的域建立HTTP连接。创建HTTP连接涉及多个关键步骤：DNS查询、TCP连接建立、TLS安全协商。这些过程可能耗时数十至数百毫秒。预连接通过提前建立连接，显著提升性能，确保当浏览器真正需要下载资源时，连接已准备就绪。

示例与真实案例研究

以Google的CSS文件请求为例。在瀑布图中，该资源请求出现时，浏览器尚未与Google字体域建立连接。若没有预连接，浏览器需先完成DNS查询、TCP连接和TLS协商，这会额外增加约100毫秒的延迟。通过在HTML中添加预连接提示，我们可以优化这一过程：

“`html

“`

优化后的瀑布图显示，预连接提示使浏览器提前连接到Google字体域。当实际请求CSS文件时，连接已就绪，资源立即下载，整个瀑布图向左移动，显著缩短加载时间。

真实世界的案例同样令人印象深刻。一家在线商店通过预连接产品图像目录的域，关键渲染指标提升超过500毫秒至1秒。Aaron Peters的CDN Planet案例中，预连接使初始渲染性能提升约10%。媒体网站通过分析并实施资源提示（包括预连接和预加载），将交互时间提高37%，中位数从12.8秒降至7.9秒。

如何使用预连接提升性能？

预连接的显著成效可能让人想对所有使用的域进行预连接。然而，过度预连接会损害性能。浏览器通过复杂逻辑决定资源下载时机，以尽快呈现页面。不当使用资源提示可能引发新的性能问题。

避免过度预连接

浏览器限制维持的HTTP连接数量。过多的预连接提示会限制浏览器建立必要连接的能力，反而降低性能。建议不超过6-8个预连接提示。

预连接未使用域的危害

更严重的是预连接未实际使用的域。这常见于网站内容来源变更或第三方服务停用时未及时删除预连接提示。未使用的预连接会占用浏览器资源，阻碍其他域连接，并浪费服务器资源。Akamai研究显示，高达6%的加密HTTP连接并未实际发送请求。

过早关闭的预连接问题

浏览器通常在10秒无请求时关闭HTTP连接。预连接提示若在10秒内未触发请求，连接将被关闭。这导致预连接失效，实际请求时仍需重新建立连接，毫无益处。

Safari的rel资源提示限制

某些网站在同一标签内同时使用预连接和dns-prefetch提示。这种做法因浏览器支持差异产生（截至2020年，支持预连接的浏览器多于dns-prefetch）。Safari仅允许标签内指定一个资源提示。同时指定多个提示会导致Safari忽略所有提示。建议单一提示使用。

何时使用预连接提示？

通常用于以下场景：
– 瀑布图中后出现的域
– 对页面呈现或交互至关重要的域
– 请求频繁或内容量大的域

典型应用包括：
– 关键渲染路径中的CSS和JS包域
– Web字体域（由CSS引用）
– 初始加载或页面呈现的API端点

实施预连接的测试验证

实施前需测试验证：
– 使用性能测量工具
– 实施变更
– 对比“之前”和“之后”的性能指标

预连接资源提示的最佳实践

审核页面资源提示使用，确保遵循最佳实践：
1. 确定页面当前所有预连接提示，包括HTML中的“标签、HTTP头部的`Link`头，以及可能存在于其他响应中的链接头。
2. 评估应预连接的域是否已在提示列表中，并分析原因。
3. 检查预连接数量是否超过6-8个，必要时删除冗余提示。
4. 验证每个预连接域的请求是否在10秒内发生，避免过早关闭连接。
5. 检查每个资源提示标签，确保无多个提示同时存在。

通过系统化审核和优化，预连接可成为提升网站性能的利器，但需谨慎使用以避免潜在的性能问题。

文章网址：https://www.wpbull.com/jiqiao/7397.html