今天在看一个后台框架时,发现这样的代码:

<link rel="dns-prefetch" href="//0.s3.envato.com">
<link rel="dns-prefetch" href="//thumb-tf.s3.envato.com" />
<link rel="dns-prefetch" href="//user-profile.s3.envato.com">
<link rel="dns-prefetch" href="//image-tf.s3.envato.com" />

赶紧搜索了一下,DNS Prefetch也就是DNS预获取,是前端DNS优化中的其中一点,另外一点嘛,就是减少DNS查询的次数。

浏览器支持情况:

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

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

下面我们来简单了解一下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查询次数。

另外引一篇写的很好的文章

http://www.cnblogs.com/suyuwen1/p/5506397.html;

最新文章

  1. chrome防止自动填充密码
  2. AndroidManifest.xml中&lt;activity&gt;&lt;/activity&gt;相关属性说明
  3. java servlet手机app访问接口(二)短信验证
  4. 【Java咬文嚼字】关键字(一):super和this
  5. Python信息采集器使用轻量级关系型数据库SQLite
  6. Spring Tool Suite(简称STS)针对SimpleDateFormat.pase函数的实参值不做检验,异常直接默认值之
  7. Orchard Core Framework:ASP.NET Core 模块化,多租户框架
  8. .net的retrofit--WebApiClient库
  9. BZOJ2726: [SDOI2012]任务安排
  10. [php] php操作xml
  11. Python之旅.第三章.函数3.26
  12. C语言实现万年历
  13. 数据库学习之MySQL进阶
  14. 页面中关于bootstrap框架的增删改查使用
  15. python目录和文件的列表清单
  16. [总结] LCT学习笔记
  17. scrapy shell的作用
  18. 创建Python程序
  19. css中span元素的width属性无效果原因及多种解决方案
  20. cygwin下使用apt-cyg安装新软件

热门文章

  1. spring -boot s-tarter 详解
  2. CenOS 6.5下 mysql自动备份
  3. 个人的MySql配置总结
  4. Java I/O---RandomAccessFile类(随机访问文件的读取和写入)
  5. ArcGIS API for JavaScript 与 Vue.js
  6. 关于js代码执行顺序
  7. Android短视频SDK转码实践
  8. My Go Resolutions for 2017(from Russ cox&#39;s blog)
  9. 冲顶大会APP技术选型及架构设计
  10. grep命令及基本正则表达式