前端优化之DNS预解析
前端优化系列之一:DNS预获取 dns-prefetch 提升页面载入速度
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 Prefetch
DNS 实现域名到IP的映射。通过域名访问站点,每次请求都要做DNS解析。目前每次DNS解析,通常在200ms以下。针对DNS解析耗时问题,一些浏览器通过DNS Prefetch 来提高访问的流畅性。
DNS Prefetch 是一种DNS 预解析技术,当浏览网页时,浏览器会在加载网页时对网页中的域名进行解析缓存,这样在单击当前网页中的连接时就无需进行DNS的解析,减少用户等待时间,提高用户体验。
目前支持 DNS Prefetch 的浏览器有 google chrome 和 firefox 3.5
如果要浏览器端对特定的域名进行解析,可以再页面中添加link标签实现。例如:
<link rel="dns-prefetch" href="http://img.jb51.net" />
如果要控制浏览器端是否对域名进行预解析,可以通过Http header 的x-dns-prefetch-control 属性进行控制。
可惜目前支持上面标签的只有 google chrome 和 firefox3.5
下面我们来简单了解一下dns-prefetch:
DNS 作为互联网的基础协议,其解析的速度似乎容易被网站优化人员忽视。现在大多数新浏览器已经针对DNS解析进行了优化,典型的一次DNS解析耗费20-120 毫秒,减少DNS解析时间和次数是个很好的优化方式。DNS Prefetching是具有此属性的域名不需要用户点击链接就在后台解析,而域名解析和内容载入是串行的网络操作,所以这个方式能减少用户的等待时间,提升用户体验。
浏览器对网站第一次的域名DNS解析查找流程依次为:
浏览器缓存-系统缓存-路由器缓存-ISP DNS缓存-递归搜索
Chrome内置了DNS Prefetching技术, Firefox 3.5 也引入了这一特性,由于Chrome和Firefox 3.5本身对DNS预解析做了相应优化设置,所以设置DNS预解析的不良影响之一就是可能会降低Google Chrome浏览器及火狐Firefox 3.5浏览器的用户体验。
预解析的实现:
1. 用meta信息来告知浏览器, 当前页面要做DNS预解析:<meta http-equiv="x-dns-prefetch-control" content="on" />
2. 在页面header中使用link标签来强制对DNS预解析: <link rel="dns-prefetch" href="http://bdimg.share.baidu.com" />
注:dns-prefetch需慎用,多页面重复DNS预解析会增加重复DNS查询次数。
PS:DNS预解析主要是用于网站前端页面优化,在SEO中的作用湛蓝还未作验证,但作为增强用户体验的一部分rel="dns-prefetch"或许值得大家慢慢发现。
前端优化之DNS预解析相关推荐
- HTTP 请求之性能优化:DNS预解析 dns-prefetch
HTTP 请求之性能优化:DNS预解析 dns-prefetch 当浏览器从第三方服务跨域请求资源的时候,在浏览器发起请求之前,这个第三方的跨域域名需要被解析为一个IP地址,这个过程就是DNS解析,D ...
- 前端性能优化:DNS 预解析
DNS 预解析 DNS 解析也是需要时间的,可以通过预解析的方式来预先获得域名所对应的 IP <link rel="dns-prefetch" href="//bl ...
- 前端优化系列:DNS预获取 dns-prefetch 提升页面载入速度
DNS Prefetch,即DNS预获取,是前端优化的一部分.一般来说,在前端优化中与 DNS 有关的有两点: 一个是减少DNS的请求次数,另一个就是进行DNS预获取 . DNS 作为互联网的基础协议 ...
- 网站性能优化之DNS预解析
为何预解析能提高网站性能,不添加预解析网站性能差在哪里? 域名与IP 在访问网站的时候,我们都是通过输入域名进行访问,但是资源是存放在服务器上的,访问资源的唯一方式就是通过IP访问获取.域名是一个IP ...
- Dns-prefetch DNS 预解析优化页面加载速度
Dns-prefetch DNS 预解析优化页面加载速度 浏览器访问一个链接时并不是直接将请求到网页对应的服务器上,而是先要做域名解析--将域名解析到网页对应的服务器 ip 地址,然后浏览器才能和服务 ...
- 性能优化(1)-DNS预解析
DNS预解析 原理 如何使用 打开和关闭DNS预解析 自动解析 手动添加解析 在浏览器中设置 看看淘宝的DNS预解析 使用场景 如何更好的使用? 对哪些资源做手动prefetch 域名发散和域名收敛 ...
- DNS预解析prefetch
概述 DNS(Domain Name System, 域名系统),是域名和IP地址相互映射的一个分布式数据库.DNS 查询就是将域名转换成 IP 的过程,这个过程短的话 2ms 几乎无感,长则可能达到 ...
- dns-prefetch—DNS预解析技术
今天在看一个网站的源代码时 发现了 <link rel="dns-prefetch" href="//static.tuweia.cn/"> 对dn ...
- DNS预解析dns-prefetch是什么及怎么使用
#诞生背景 Dns请求虽然占用了很少的带宽,但会有很高的延迟,由其以移动网络会更加明显.通过dns预解析技术可以很好的降低延迟 在firefox上使用dns-prefetch,dns预解析是与页面加载 ...
最新文章
- Reactor模式与Proactor模式
- 炫酷大屏demo_可视化大屏动态效果
- 语义分割中的深度学习方法全解:从FCN、SegNet到各版本DeepLab
- Qt编写可换肤的中文双拼汉字输入法
- php用mssql还是用pdo,php使用pdo连接mssql server数据库实例
- 004-docker常用命令[二]-容器操作ps,top,attach,export
- vue 引用网络css_vue如何引用其他组件(css和js)
- 什么是LUT(LOOK UP TABLE)
- Ogre 1.7 SDKTRAY 初探
- zlog日志使用说明
- 我是如何给妹子优化 Windows 的?
- m3u8流媒体下载 swift
- Toast基本使用方法
- 三天,我通过了Apsara Clouder基础技能认证:阿里巴巴Android开发规范
- 最新Ubuntu20.04安装指南(防踩坑版)
- 海外专利紧缺 中国IT企业国际化维艰
- ScrollBar ScrollWindow
- 龙芯的3A5000:中国的最佳拍档?
- 杰理之flash常见问题【篇】
- shape context-形状上下文