preconnect 预解析

秋夫人

已于 2024-10-03 12:35:55 修改

阅读量519

点赞数 4

分类专栏：计算机网络文章标签：服务器网络

于 2024-10-03 12:35:07 首次发布

本文链接：https://blog.csdn.net/wangnanwlw/article/details/142690784

版权

计算机网络专栏收录该内容

31 篇文章

订阅专栏

preconnect 是一种浏览器优化技术，用于告诉浏览器提前与指定的域名建立连接，包括DNS解析、TCP握手和TLS协商（如果适用）。这样做可以减少客户端在请求资源时所需的往返时间（RTT），从而提高页面加载速度。

使用方法

preconnect 通常在HTML文档的 <head> 部分使用 <link> 标签来指定，如下所示：

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

这行代码告诉浏览器提前与 example.com 建立连接。

应用场景

外部资源：当网页依赖于从不同域名加载的外部资源（如脚本、图片、样式表等）时，使用 preconnect 可以提前建立到这些域名的连接，减少加载时间。
关键请求：对于那些对页面渲染至关重要的资源，使用 preconnect 可以确保尽快获取这些资源。

注意事项

资源消耗：虽然 preconnect 可以减少页面加载时间，但它也会消耗用户的带宽和浏览器资源。因此，应当仅对关键的外部域使用 preconnect。
兼容性：大多数现代浏览器都支持 preconnect，但在使用时仍需考虑浏览器兼容性。
与其他优化技术的关系：preconnect 与 dns-prefetch、preload 和 prefetch 等其他资源提示技术相辅相成。dns-prefetch 仅解析DNS，preload 用于提前加载当前页面即将使用的资源，而 prefetch 用于加载可能在将来某个页面上使用的资源。

示例

假设一个网页需要从多个不同的域名加载资源，可以在文档头部添加 preconnect 指令：

<head>
    <link rel="preconnect" href="https://example.com">
    <link rel="preconnect" href="https://cdn.example.com">
    <link rel="preconnect" href="https://api.example.com">
</head>