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"> 后面。具体使用方法如下:

<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,可以使用以下的标签:

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

DNS预读取 dns-prefetch 提升页面载入速度的更多相关文章

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

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

  2. 前端优化系列之一:dns预获取 dns-prefetch 提升页面载入速度

    问题:怎么做到dns域解析?   用于优化网站页面的图片   问题:怎么提升网站性能? dns域解析,是提升网站的一个办法.   DNS Prefetch,即DNS预获取,是前端优化的一部分. 一般来 ...

  3. DNS 预读取功能 链接预取

    https://developer.mozilla.org/zh-CN/docs/Controlling_DNS_prefetching DNS 请求需要的带宽非常小,但是延迟却有点高,这一点在手机网 ...

  4. 如何提高ASP.NET页面载入速度的方法

    前言 本文是我对ASP.NET页面载入速度提高的一些做法,这些做法分为以下部分: 1.采用 HTTP Module 控制页面的生命周期. 2.自定义Response.Filter得到输出流stream ...

  5. 提高ASP.NET页面载入速度的方法

    前言 本文是我对ASP.NET页面载入速度提高的一些做法,这些做法分为以下部分: 目录 1.采用 HTTP Module 控制页面的生命周期. 2.自定义Response.Filter得到输出流str ...

  6. jsp的凝视可能会影响页面载入速度

    在jsp页面使用"<!-- -->"的凝视,凝视里面的java代码还是会得到运行,能够再查看页面源码上看到运行完毕的内容,这样就会让不希望运行的代码得到运行.影响载入速 ...

  7. HTML5的页面资源预加载技术(Link prefetch)加速页面加载

    不管是浏览器的开发者还是普通web应用的开发者,他们都在做一个共同的努力:让Web浏览有更快的速度感觉.有很多已知的技术都可以让你的网站速度变得更快:使用CSS sprites,使用图片优化工具,使用 ...

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

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

  9. DNS 预解析

    DNS 解析也是需要时间的,可以通过预解析的方式来预先获得域名所对应的 IP. <link rel="dns-prefetch" href="//yuchengka ...

随机推荐

  1. Mybatis 1.原理流程图

    仅用来做个人笔记记录. 总流程: 根据配置文件(全局配置文件和sql映射文件)初始化configuration对象. 创建一个defaultSqlSession对象,包含Configuration及E ...

  2. 单节点FastDFS安装

    环境:centos7 1.什么是分布式文件系统 分布式文件系统(Distributed File System)是指文件系统管理的物理存储资源不一定直接连接在本地节点上,而是通过计算机网络与节点相连. ...

  3. 部署 laravel项目404错误

    1.nginx 下部署出现404错误 (1)打开php.ini中的php_openssl.dll这个扩展: (2)修改nginx 下的站点目录配置文件(我的是配置在vhost.conf)为: loca ...

  4. Exchange 2010 详细安装步骤

    工具/原料   系统要求:windows 2008 R2 标准版或者企业版 Exchange Server 2010 SP3:https://www.microsoft.com/en-us/downl ...

  5. vue.js的v-bind

    v-bind v-bind  主要用于属性绑定, html中的标签内: <div class="control-group"> <label class=&quo ...

  6. idea启动,mysql连接超时错误

    The last packet sent successfully to the server was 0 milliseconds ago. The driver has not received ...

  7. 初探 -1 JavaScript

    JavaScript 教程 JavaScript 是 Web 的编程语言. 所有现代的 HTML 页面都使用 JavaScript. JavaScript 非常容易学. 本教程将教你学习从初级到高级J ...

  8. ms17010批量扫描备忘

    安装一些依赖: dpkg --add-architecture i386 && apt-get update && apt-get install wine32 rm ...

  9. PL/SQL中判断字段为空

    功能写完发现数据库里好多关键字段是空的,可以直接删掉,可直接: DELETE FROM 表名 WHERE 字段 IS NULL OR TRIM(字段) = ''

  10. SQL函数 Convert,dateadd

    1.SQL中CONVERT转化函数的用法 格式:CONVERT(data_type,expression[,style])说明:此样式一般在时间类型(datetime,smalldatetime)与字 ...