DNS Prefetch 预读取到底是什么意思?如何正确使用?

  最新查看网站源代码,发现 WordPress 头部有这么一条:

<link rel='dns-prefetch' href='https://s.w.org' />

这是什么意思呢?dns-prefetch,顾名思义就 DNS 预读取,大致了解但不是特别清楚,赶紧学习一下

什么是 DNS Prefetch 预读取?

  它是网页前端的优化的一种技术。一般在前端优化中与DNS有关的有两点:1、减少请求次数,2、提前对DNS预获取。DNS作为互联网的基础协议,其解析速度很容易被网站优化人员SEO人员忽视,其典型的一次 DNS Prefetch 解析需要“20-120ms”,减少DNS解析时间和次数是一个不错的优化方式。

  DNS Prefetch作用简单说明就是当你浏览网页时,浏览器会加载网页时对网页中的域名进行解析缓存,这样在你单击当前网页链接无需DNS解析,减少浏览者等待时间,提高用户体验。

  再来看看浏览器对网站第一次的域名DNS解析查找流程,依次为:

浏览器缓存-系统缓存-路由器缓存-ISP DNS缓存-递归搜索。

DNS Prefetch 预读取

DNS Prefetch 使用方法

  用meta信息来告知浏览器, 当前页面要做DNS预解析:

&lt;meta http-equiv="x-dns-prefetch-control" content="on" />

  在页面header中使用link标签来强制对DNS预解析:

<link rel="dns-prefetch" href="https://www.hack520.com" />

//开始是为了适配 https 和 http 。就是当前请求链接是https,那么这个//前面自动补充https ,反则补充http。

使用示例:

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="x-dns-prefetch-control" content="on" />
<link rel="dns-prefetch" href="https://cdn.hack520.com"/>
<link rel="dns-prefetch" href="http://img.hack520.com" />

注:dns-prefetch需慎用,多页面重复DNS预解析会增加重复DNS查询次数。

人已赞赏
建站经验

HTTPS 加速是什么?比 HTTP 好在哪里?

2020-12-31 22:44:33

建站经验

让网站“飞”起来 – Web前端性能优化技巧总结

2021-1-1 22:44:45

下载说明

  • 1、微码盒所提供的压缩包若无特别说明,解压密码均为weimahe.com
  • 2、下载后文件若为压缩包格式,请安装7Z软件或者其它压缩软件进行解压;
  • 3、文件比较大的时候,建议使用下载工具进行下载,浏览器下载有时候会自动中断,导致下载错误;
  • 4、资源可能会由于内容问题被和谐,导致下载链接不可用,遇到此问题,请到文章页面进行反馈,以便微码盒及时进行更新;
  • 5、其他下载问题请自行搜索教程,这里不一一讲解。

站长声明

本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有;若为付费资源,请在下载后24小时之内自觉删除;若作商业用途,请到原网站购买;由于未及时购买和付费发生的侵权行为,与本站无关。本站发布的内容若侵犯到您的权益,请联系本站删除,我们将及时处理!
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索