dns-prefetch,是DNS预获取,也是网页前端的优化的一种技术。一般在前端优化中与DNS有关的两点:1、减少请求次数,2、提前对DNS预获取。DNS作为互联网的基础协议,其解析速度很容易被网站优化人员SEO人员忽视,其典型的一次dns-prefetch解析需要“20-120ms",减少DNS解析时间和次数是一个不错的优化方式。
dns-prefetch作用简单说明就是当你浏览网页时,浏览器会加载网页时对网页中的域名进行解析缓存,这样在你单击当前网页链接无需DNS解析,减少浏览者等待时间,提高用户体验。
浏览器对网站第一次的域名DNS解析查找流程依次为:
浏览器缓存-系统缓存-路由器缓存-ISP DNS缓存-递归搜索
那么如果添加dns-prefetch耶?
当然在浏览器支持方面google chrome、 firefox3.5浏览器 、safari 5+、IE9等。dns-prefetch放入位置推荐在后面。具体代码为:
需要注意,虽然dns-prefetch能够加快网页解析速度,但是也不能随便滥用,因为多页面重复DNS预解析会增加重复DNS查询的次数。
目前使用有“淘宝”、“支付宝”、"腾讯"等。
总结:在优化当中dns-prefetch对网页预获取,在提高大型网站浏览速度方面可以提高,不用让浏览者等待是一个不错的方法。
参考:
X-DNS-Prefetch-Control
头控制着浏览器的 DNS 预读取功能。 DNS 预读取是一项使浏览器主动去执行域名解析的功能,其范围包括文档的所有链接,无论是图片的,CSS 的,还是 JavaScript 等其他用户能够点击的 URL。
因为预读取会在后台执行,所以 DNS 很可能在链接对应的东西出现之前就已经解析完毕。这能够减少用户点击链接时的延迟。
Header type | Response header |
---|---|
Forbidden header name | no |
语法
X-DNS-Prefetch-Control: on X-DNS-Prefetch-Control: off
参数
on
启用 DNS 预解析。在浏览器支持 DNS 预解析的特性时即使不使用该标签浏览器依然会进行预解析。
off
关闭 DNS 预解析。这个属性在页面上的链接并不是由你控制的或是你根本不想向这些域名引导数据时是非常有用的。
介绍
DNS 请求需要的带宽非常小,但是延迟却有点高,这点在手机网络上特别明显。预读取 DNS 能让延迟明显减少一些,例如用户点击链接时。在某些情况下,延迟能减少一秒钟。
在某些浏览器中这个预读取的行为将会与页面实际内容并行发生(而不是串行)。正因如此,某些高延迟的域名的解析过程才不会卡住资源的加载。
这样可以极大的加速(尤其是移动网络环境下)页面的加载。在某些图片较多的页面中,在发起图片加载请求之前预先把域名解析好将会有至少 5% 的图片加载速度提升。
在浏览器中设置预读取配置
一般来说并不需要去管理预读取,但是可能会有用户希望关闭预读取功能。这时只需要设置 network.dns.disablePrefetch
preference 值为 true
就可以了。
另外,默认情况下,通过 HTTPS 加载的页面上内嵌链接的域名并不会执行预加载。在 Firefox 浏览器中,可以通过设置 network.dns.disablePrefetchFromHTTPS
值为 false
来改变这一默认行为。
示例
打开和关闭 DNS 预读取
你可以通过在服务器端发送 X-DNS-Prefetch-Control 报头,或是在文档中使用值为 http-equiv 的 <meta> 标签:
<meta http-equiv="x-dns-prefetch-control" content="off">
您可以通过将 content 的参数设置为“on”来改变设置。
强制查询特定主机名
你可以通过使用 rel 属性值为 link type 中的 dns-prefetch 的 <link> 标签来对特定域名进行预读取:
<link rel="dns-prefetch" href="/http://www.taosas.com/">
在这个例子中,Firefox将预解析域名"www.taosas.com"。
而且,<link> 元素也可以使用不完整的 URL 的主机名来标记预解析,但这些主机名前必需要有双斜线:
<link rel="dns-prefetch" href="//www.taosas.com">
强制对域名进行预读取在有的情况下很有用, 比如, 在网站的主页上,强制在整个网站上频繁引用的域名的预解析,即使它们不在主页本身上使用。即使主页的性能可能不受影响,这将提高整体站点性能。