什么是 DNS Prefetch ?
DNS Prefetch 是一种 DNS 预解析技术。当你浏览网页时,浏览器会在加载网页时对网页中的域名进行解析缓存,这样在你单击当前网页中的连接时就无需进行 DNS 的解析,减少用户等待时间,提高用户体验。
目前每次DNS解析,通常在200ms以下。针对DNS解析耗时问题,一些浏览器通过DNS Prefetch 来提高访问的流畅性。
设置方式
如果要浏览器端对特定的域名进行解析,通过以下两种方式实现:
1、通过 link 标签实现,例如:< link rel="dns-prefetch" href="http://api.twitter.com" />
2、通过 meta 标签实现,例如:< meta http-equiv="x-dns-prefetch-control" content="on" />
3、通过设置 Http header 的 x-dns-prefetch-control 属性为 on 进行控制。
这段代码应尽量写在网页的前部,起到减少dns请求的功能。
浏览器支持
- Firefox: 3.5+
- Chrome: Supported
- Safari 5+
- IE: 9
关于google chrome 中 DNS Prefetch
详细资料可参见: http://dev.chromium.org/developers/design-documents/dns-prefetching
在chrome 中可通过在地址栏中输入 about:histograms/DNS.PrefetchFoundName 和 about:dns 来查看当前浏览器的预解析数据。
参考资料
https://github.com/h5bp/html5-boilerplate/wiki/DNS-Prefetching
相关推荐
详解HTML标签属性link rel="dns-prefetch"是什么意思? DNS Prefetch有什么用处?
什么是 DNS Prefetch DNS 实现域名到IP的映射。通过域名访问站点,每次请求都要做DNS解析。目前每次DNS解析,通常在200ms以下。针对DNS解析耗时问题,一些浏览器通过DNS Prefetch 来提高访问的流畅性。 DNS Prefetch...
HTML5的<link rel="dns-prefetch"标签是干什么用的
通常,我们为了减少DNS的查询时间,我们可以使用dns prefetch为该页面中链接的做解析,提升页面的加载速度。类似的,我们可以在鼠标滑到链接上到点击的时间间隙去加载这个页面,通常这个间隙有几百毫秒,利用...
<link rel="dns-prefetch" href="https://assets-cdn.github.com"> <link rel="dns-prefetch" href="https://avatars0.githubusercontent.com"> <link rel="dns-prefetch" href=...
这是一种古老的技术-DNS隧道本身可以追溯到90年代, 在2016年写过关于使用dns-prefetch的信息,但据我所知,browsertunnel是第一个开放源代码,可用于生产的客户端展示其用途。 由于dns-prefetch不会将任何数据返回...
在HTML5中,有个很有用但常被忽略的特性,就是预先加载(prefetch),它的原理是: 利用浏览器的空闲时间去先下载用户指定需要的内容,然后缓存起来,这样用户下次加载时,就直接从缓存中取出来,效率就快了. 举个例子说明:...
link rel="dns-prefetch" href="//qq.com"> <link rel="preconnect" href="//qq.com" crossorigin> <link rel="dns-prefetch" href="//baidu.com"> <link rel="preconnect" href="//baidu....
Edotensei.js ... 安装方式 $ yarn add edotensei --dev $ npm install edotensei --... rel: 'preload|prefetch|dns-prefetch' }, // load css { src: 'main.css', // load css rel: 'preload|prefetch|dns-prefetc
代码很简单,只是给大家一个思路的,这里就不多...link rel=”dns-prefetch” href=”http://mmbiz.qpic.cn”> <link rel=”dns-prefetch” href=”http://res.wx.qq.com”> <meta name=”viewport” cont
link rel =" dns-prefetch " href =" //google.com " >< link rel =" prefetch " href =" //google.com/index.html " >< link rel =" prerender " href =" //google.com/index.html " >< meta ...
默认情况下, 将设置X-DNS-Prefetch-Control , X-Frame-Options , Strict-Transport-Security , X-Download-Options , Expect-Ct , Referrer-Policy和X-Content-Type-Options标头。 此外,该模块还将默认设置X...
Jetpack资产管理 一个包含改善资产(脚本等)加载功能的软件包。 包括路径操作,排队异步脚本和DNS资源提示。... 接受dns-prefetch(默认),preconnect,prefetch或prerender的类型。 测验 $ composer run phpunit
RailsParseHead RailsParseHead是一个简单的Ruby库,用于解析网站中的head元素信息。 在以下位置了解有关head元素的更多信息: 安装将此行... links # => [{:rel=>"dns-prefetch", :href=>"https://github.githubasse
Prefetch chain 预处理链 Pre selector Precondition Enforcer Fetch chain 提取链 Fetch DNS Fetch Http Extractor chain抽取链 Extractor HTML Extractor JS Write Chain 写链 ARC Writer Processor Post...
Subversive.eu 简单的博客。 En savoir plus: : Prochaine版本 ... X-DNS-Prefetch-Control。 评论员更正。 Bouton Haut de page avec JS 评论家协会 Itemscope校正。 SecureJS OK。 / 内容安全策略?
该扩展将始终抓取源代码,并查找预渲染,预取,预连接或dns-prefetch。 如果找到这些提示中的任何提示,图标将变色。 如果单击该图标,则可以检查实现了哪个特定资源提示以及在哪个资源上。 您是否知道Google会以较...
DNS x-dns-prefetch-control 1. 2. 3. DNS 200ms RTT 1. 2. KEEP-ALIVE QQ hold 1. ChromeSpeed 2. Chrome 1. Fiddler/Charles 2. Fiddler willow 3. WEBINspectorRemote 4. WEINRE weinre.qq.com 5. BrowerSync 6. ...