DNS Prefetch DNS预解析

最新推荐文章于 2024-01-05 16:52:14 发布

fiyin

最新推荐文章于 2024-01-05 16:52:14 发布

阅读量415

点赞数

分类专栏： css 文章标签： css学习

本文链接：https://blog.youkuaiyun.com/fiyin/article/details/48439079

版权

css 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了DNS Prefetch技术，一种可以提升网站加载速度的技术。它通过提前解析网页中出现的域名，减少用户的等待时间，从而改善用户体验。文章还详细解释了DNS Prefetch的设置方法及其在现代浏览器中的支持情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天在支付宝的页面代码看到


  
<link href="https://a.alipayobjects.com" rel="dns-prefetch" />
<link href="https://app.alipay.com" rel="dns-prefetch" />
<link href="https://my.alipay.com" rel="dns-prefetch" />
<link href="https://lab.alipay.com" rel="dns-prefetch" />
<link href="https://cashier.alipay.com" rel="dns-prefetch" />
<link href="https://financeprod.alipay.com" rel="dns-prefetch" />
<link href="https://shenghuo.alipay.com" rel="dns-prefetch" />

查了下dns prefetch的用处，在这里做个标记以备后用

什么是 DNS Prefetch ?

DNS Prefetch 是一种 DNS 预解析技术。当你浏览网页时，浏览器会在加载网页时对网页中的域名进行解析缓存，这样在你单击当前网页中的连接时就无需进行 DNS 的解析，减少用户等待时间，提高用户体验。

目前每次DNS解析，通常在200ms以下。针对DNS解析耗时问题，一些浏览器通过DNS Prefetch 来提高访问的流畅性。

设置方式

如果要浏览器端对特定的域名进行解析，通过以下两种方式实现：

1、通过 link 标签实现，例如：< link rel="dns-prefetch" href="http://api.twitter.com" />

2、通过 meta 标签实现，例如：< meta http-equiv="x-dns-prefetch-control" content="on" />

3、通过设置 Http header 的 x-dns-prefetch-control 属性为 on 进行控制。

这段代码应尽量写在网页的前部，起到减少dns请求的功能。

浏览器支持