知识就在眼前
资源就在这里

什么是DNS预解析?dns-prefetch真的可以提升网站的速度吗?

知道“dns-prefetch”预解析源于几年前在知乎上看到的一篇文章,这篇文章把“dns-prefetch”预解析的效果说的很玄,后来也没有怎么关注,毕竟那时候才刚刚出来这个东西,而前几天自己偶然发现国内的一些知名网站都已经开始开始添加dns-prefetch标签了,比如淘宝、支付宝、网易、京东这些大站都有添加这个标签,所以今天就来说一说什么是DNS预解析?dns-prefetch真的可以提升页面的速度吗?

什么是DNS预解析?dns-prefetch真的可以提升网站的速度吗? 技术知识 第1张

一、什么是DNS prefetch预解析?

我们都知道,在我们上网时向浏览器输入一个网址(域名,URL地址)后,首先会进行DNS解析为对应的 IP 地址,DNS解析是一个漫长的过程,虽然随着科技的进步,我们的网速已经得到了很大的提升,但是正常的DNS解析流程还是没有变化,都是需要经过解析后再返回对应的一个页面和数据展示给我们。

而DNS prefetch的原理就是,当我们开启了DNS prefetch后,浏览器在空闲时间会提前把这些域名转换为对应的IP地址,缓存到系统缓存中,从而缩短DNS解析花费的时间,提高访问网站的速度。

DNS 缓存查询机制:解析之前会查询缓存试得到 IP 地址,查询缓存的顺序为:浏览器缓存 ——> hosts系统缓存 ——> 路由器缓存 ——> ISP(互联网服务提供商)DNS缓存,如果没有缓存就继续递归查询 ——> 根域名服务器 ——> 顶级域名服务器 ——> 主域名服务器 ——> 保存结果至缓存;如果提前设置了 DNS 缓存,那么也减少了查询的步骤。

二、如何给自己的网站添加DNS prefetch预解析?

通过前面的说明,大家应该都知道DNS prefetch预解析确实能够提升网站的页面载入速度,那么如何给自己的网站添加DNS prefetch预解析呢?

首先我们来看一个已经添加了DNS prefetch预解析的网站的代码是如何部署的,这里以淘宝网为例。

什么是DNS预解析?dns-prefetch真的可以提升网站的速度吗? 技术知识 第2张

不知道大家发现没有,在使用dns-prefetch预解析的时候,链接不是通用的那种,而是网站内部链接,比如淘宝的CDN图片链接,所以如果说“dns-prefetch”真的有效果,那么也是使用自己的资源作为预加载,而不是照抄直接复制粘贴就可以的。就上图淘宝网的dns-prefetch设置图片所示,你直接复制过来后,你的网站资源根本不涉及淘宝或者京东的图片,那么这就是个鸡肋的操作。

我这里简单总结了几个常用的资源链接,我们就以这些比较常见的资源链接来说明一下给自己网站部署DNS Prefetch预解析的方法。

首先,DNS Prefetch 应该尽量的放在网页的前面,具体使用方法如下:

<link rel=”dns-prefetch” href=”//bdimg.share.baidu.com” />
<link rel=”dns-prefetch” href=”//cdn.staticfile.org” />
<link rel=”dns-prefetch” href=”//hm.baidu.com” />

以上代码的作用就是在页面header中使用link标签来对DNS预解析:

<link rel=”dns-prefetch” href=”预解析链接” />

bdimg.share.baidu.com是百度分享的资源链接;

cdn.staticfile.org是奥森图标的资源链接;

hm.baidu.com是百度统计的资源链接;

以上仅仅是案例,我们还可以添加阿里云图标,百度和谷歌联盟代码等等。有些资源链接可能存在http和https的区别,如果不确定是http还是https连接的话建议采用如上代码。

三、如何不漏掉域名?

现在大家的网站采用的公共库资源还是比较多的,还有各种图床之类的,那么在添加DNS Prefetch预解析的时候如何不漏掉域名呢?

01、借助开发者工具,查看所有静态资源域名,并添加link标签,手动解析如果是HTTPS网页,考虑是否需要对超链接自动解析,如果需要,添加对应的meta标签。

02、检查js中发起的跳转至其他域名的情况,对于这些域名,添加link标签,手动解析。

03、检查是否存在重定向的域名,对于重定向的域名,将重定向之后的域名。

04、添加link标签,手动解析。

这这里说明一下,并非所有页面都要手动解析,一般在整个站点的入口页做这个工作就行了,毕竟一个站点下用到的大多数域名都会在首页体现。

四、如何开启或者关闭DNS Prefetch预解析?

希望在HTTPS页面开启自动解析功能时,添加如下标记:

<meta http-equiv=”x-dns-prefetch-control” content=”on”>

希望在HTTP页面关闭自动解析功能时,添加如下标记:

<meta http-equiv=”x-dns-prefetch-control” content=”off”>

五、DNS prefetch会影响SEO吗?

经过我几个网站较长时间的对比验证,发现DNS Prefetch并不会对网站在SEO方面有什么影响,但是按照常理推断,一个网站的打开速度越快,是有利于搜索引擎蜘蛛爬行的,DNS预解析主要是用于网站前端页面优化,而且作为增强用户体验的一部分,DNS prefetch或许是值得大家去发掘的。

 收藏 (0) 打赏

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

分享到: 生成海报

评论 抢沙发

  • QQ号
  • 昵称
  • 邮箱
  • 网址
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活