DNS 解析也是需要时间的,可以通过预解析的方式来预先获得域名所对应的 IP。

<link rel="dns-prefetch" href="//yuchengkai.cn">

DNS Prefetch,即DNS预获取,是前端优化的一部分。一般来说,在前端优化中与 DNS 有关的有两点: 一个是减少DNS的请求次数,另一个就是进行DNS预获取 。

DNS 作为互联网的基础协议,其解析的速度似乎很容易被网站优化人员忽视。现在大多数新浏览器已经针对DNS解析进行了优化,典型的一次DNS解析需要耗费 20-120 毫秒,减少DNS解析时间和次数是个很好的优化方式。DNS Prefetching 是让具有此属性的域名不需要用户点击链接就在后台解析,而域名解析和内容载入是串行的网络操作,所以这个方式能 减少用户的等待时间,提升用户体验 。

默认情况下浏览器会对页面中和当前域名(正在浏览网页的域名)不在同一个域的域名进行预获取,并且缓存结果,这就是隐式的 DNS Prefetch。如果想对页面中没有出现的域进行预获取,那么就要使用显示的 DNS Prefetch 了。

目前大多数浏览器已经支持此属性,支持版本如下:

  • – Safari: 5+
  • – Chrome: All
  • – Firefox: 3.5+
  • – Opera: Unknown
  • – IE: 9+ (called “Pre-resolution” on blogs.msdn.com)

其中 Chrome 和 Firefox 3.5+ 内置了 DNS Prefetching 技术并对DNS预解析做了相应优化设置。所以 即使不设置此属性,Chrome 和 Firefox 3.5+ 也能自动在后台进行预解析 。

目前很多大型站点也应用了这一优化,例如:

淘宝:

支付宝:

网易:

DNS Prefetch 应该尽量的放在网页的前面,推荐放在 <meta charset="UTF-8"> 后面。具体使用方法如下:

1
2
3
4
<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="//www.zhix.net">
<link rel="dns-prefetch" href="//api.share.zhix.net">
<link rel="dns-prefetch" href="//bdimg.share.zhix.net">

需要注意的是,虽然使用 DNS Prefetch 能够加快页面的解析速度,但是也不能滥用,因为有开发者指出 禁用DNS 预读取能节省每月100亿的DNS查询 。

如果需要禁止隐式的 DNS Prefetch,可以使用以下的标签:

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

DNS 预解析的更多相关文章

  1. 前端优化:DNS预解析提升页面速度

    在网页体验中我们常会遇到这种情况,即在调用百度联盟.谷歌联盟以及当前网页所在域名外的域名文件时会遇到请求延时非常严重的情况.那么有没有方法去解决这种请求严重延时的现象呢? 一般来说这种延时的原因不会是 ...

  2. dns-prefetch—DNS预解析技术

    今天在看一个网站的源代码时 发现了 <link rel="dns-prefetch" href="//static.tuweia.cn/"> 对dn ...

  3. 前端性能优化之-dns预解析

    预解析的实现: 1. 用meta信息来告知浏览器, 当前页面要做DNS预解析:<meta http-equiv="x-dns-prefetch-control" conten ...

  4. DNS预解析prefetch

    前面的话 本文将详细介绍DNS预解析prefetch的主要内容 概述 DNS(Domain Name System, 域名系统),是域名和IP地址相互映射的一个分布式数据库.DNS 查询就是将域名转换 ...

  5. DNS预解析dns-prefetch提升页面载入速度优化前端性能

    当浏览器请求一个URL的时候,通过firebug我们可以发现大概有以下几个过程:阻挡.域名解析.建立连接.发送请求.等待响应.接收数据.后面四个跟用户的网络情况和你的服务器处理速度有关,本文重点说说前 ...

  6. 前端性能优化-减少http请求,dns预解析,减少repaint和reflow

    前端性能优化方法: 一 . 减少http请求 (1)通过合并图片,减少请求,俗称css sprites(css精灵)css sprites (2)lazyload懒加载,在需要的时候再加载 1.定义: ...

  7. 浏览器 DNS缓存与DNS prefetch (DNS预解析)

    浏览器 DNS缓存 浏览器DNS缓存的时间跟DNS服务器返回的TTL值无关. 注:TTL(Time-To-Live),就是一条域名解析记录在DNS服务器中的存留时间. 浏览器在获取网站域名的实际IP地 ...

  8. DNS Prefetch 【DNS 预解析技术】

    DNS 实现域名到IP的映射.通过域名访问站点,每次请求都要做DNS解析.目前每次DNS解析,通常在200ms以下.针对DNS解析耗时问题,一些浏览器通过DNS Prefetch 来提高访问的流畅性. ...

  9. 前端优化DNS预解析

    写在前面 今天再看一同事写的代码,发现了这样<link rel="dns-prefetch" href="//hm.baidu.com">这个代码, ...

随机推荐

  1. day10作业—(闭包迭代器递归)

    补充:一个星号的  打散和聚合 a, b , *c = [1,2, 1,4] print( a , b , *c) #1 2 1 4 print(a, b, c) #1 2 [1, 4] *c , = ...

  2. 制作centos sshd 镜像

    [root@b5926410fe60 /]# yum install passwd openssl openssh-server -y 启动sshd: # /usr/sbin/sshd -D 这时报以 ...

  3. 转--O2O刷单“黑市”折射下的泡沫#神作#

    “XX打车和XX用车这样的公司,太不真诚.从前补贴的是现金,现在补贴的都是各种券,还有各种使用上的规则,为什么要设置这么多的限制?反正都要花一样的钱,为什么不能痛快点?让用户体验好一点?” 说这个话的 ...

  4. Linux关机操作

    正确的关机流程为:sync > shutdown > reboot > halt 关机指令为:shutdown ,你可以man shutdown 来看一下帮助文档. 例如你可以运行如 ...

  5. mysql mybatis useGeneratedKeys Field 'ID' doesn't have a default value的问题

    原因是:创建表时没有让id自动增长: CREATE TABLE `STORAGE_VIRTUAL` ( `ID` ) NOT NULL AUTO_INCREMENT, `STORAGE_ID` ) N ...

  6. Ng第九课:神经网络的学习(Neural Networks: Learning)

    9.1  代价函数 9.2  反向传播算法 9.3  反向传播算法的直观理解 9.4  实现注意:展开参数 9.5  梯度检验 9.6  随机初始化 9.7  综合起来 9.8  自主驾驶 9.1   ...

  7. Codeforces Round #535 (Div. 3) 1108C - Nice Garland

    #include <bits/stdc++.h> using namespace std; int main() { #ifdef _DEBUG freopen("input.t ...

  8. STL容器(C11)--unordered_map用法

    http://www.cplusplus.com/reference/unordered_map/unordered_map/

  9. codeforces 475D

    题意:给定n(n<=100000)个1e9以内的数的数组a,然后最多有3*1e5的询问,对于每个询问,给定一个x,问有多少个(l<=r&&gcd(a[l],a[l+1].. ...

  10. centos rpm包下载地址

    这个是6.5的下载地址,其他版本可以退回目录找相应的版本 http://vault.centos.org/6.5/updates/x86_64/Packages/