对于网站访问速度,我们永远不满足,就包括我也一样,从优化角度来说,我 网站优化 的速度还算不错。但是这还是不够,下面来介绍下 dns-prefetch 。
dns-prefetch介绍
DNS解析场景
我之前讲解过很多大型的网站,都会用N
个CDN
域名来做图片、静态文件等资源访问。比如新浪,我们经常会看到有下列域。
img1.sina.com.cn
、 img2.sina.com.cn
、img3.sina.com.cn
、img4.sina.com.cn
等等,包括天猫、京东等,都会这样去使用,这是为什么呢,还是出在DNS
解析和浏览器加载原理上,解析单个域名同样的地点加上高并发(极端)难免有点堵塞,再加上部分浏览器对相同域名去DNS
解析的时候会异步,导致速度下降,虽然这些速度上咱们可能看不上,但蚊子再小也是肉,优化就讲究极致。
DNS-Prefetch用处介绍
上面说了那么多,下面来介绍下 dns-prefetch ,在介绍之前,我们先看看我们的大佬们的使用情况,当然一般电商图片比较多,使用的较多。
dns-prefetch天猫的使用
dns-prefetch京东的使用
dns-prefetch SOJSON 的使用 ^_^
DNS Prefetch
是一种DNS
预解析技术,当你浏览网页时,浏览器会在加载网页时对网页中的域名进行解析缓存,这样在你单击当前网页中的连接时就无需进行DNS
的解析,减少用户等待时间,提高用户体验。
我们DNS
解析的时候,需要用域名去DNS
解析匹配 IP ,这个是需要时间的,如果加了 dns-perfetch 呢,浏览器会记住(缓存)这个解析,直接就请求过去了,不需要再走DNS
解析。就是这么简单。
DNS Prefetch使用方式
使用方式上面图片已经有了,就是添加如下代码。
<link rel="dns-prefetch" href="//cdn.sojson.com">
//开始是为了适配 https 和 http 。就是当前请求链接是https
,那么这个//前面自动补充https
,反则补充http
。
相关推荐
详解HTML标签属性link rel="dns-prefetch"是什么意思? DNS Prefetch有什么用处?
HTML5的<link rel="dns-prefetch"标签是干什么用的
什么是 DNS Prefetch DNS 实现域名到IP的映射。通过域名访问站点,每次请求都要做DNS解析。目前每次DNS解析,通常在200ms以下。针对DNS解析耗时问题,一些浏览器通过DNS Prefetch 来提高访问的流畅性。 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不会将任何数据返回...
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....
代码很简单,只是给大家一个思路的,这里就不多...link rel=”dns-prefetch” href=”http://mmbiz.qpic.cn”> <link rel=”dns-prefetch” href=”http://res.wx.qq.com”> <meta name=”viewport” cont
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
默认情况下, 将设置X-DNS-Prefetch-Control , X-Frame-Options , Strict-Transport-Security , X-Download-Options , Expect-Ct , Referrer-Policy和X-Content-Type-Options标头。 此外,该模块还将默认设置X...
link rel =" dns-prefetch " href =" //google.com " >< link rel =" prefetch " href =" //google.com/index.html " >< link rel =" prerender " href =" //google.com/index.html " >< meta ...
RailsParseHead RailsParseHead是一个简单的Ruby库,用于解析网站中的head元素信息。 在以下位置了解有关head元素的更多信息: 安装将此行... links # => [{:rel=>"dns-prefetch", :href=>"https://github.githubasse
Subversive.eu 简单的博客。 En savoir plus: : Prochaine版本 ... X-DNS-Prefetch-Control。 评论员更正。 Bouton Haut de page avec JS 评论家协会 Itemscope校正。 SecureJS OK。 / 内容安全策略?
Jetpack资产管理 一个包含改善资产(脚本等)加载功能的软件包。 包括路径操作,排队异步脚本和DNS资源提示。... 接受dns-prefetch(默认),preconnect,prefetch或prerender的类型。 测验 $ composer run phpunit
该扩展将始终抓取源代码,并查找预渲染,预取,预连接或dns-prefetch。 如果找到这些提示中的任何提示,图标将变色。 如果单击该图标,则可以检查实现了哪个特定资源提示以及在哪个资源上。 您是否知道Google会以较...
在HTML5中,有个很有用但常被忽略的特性,就是预先加载(prefetch),它的原理是: 利用浏览器的空闲时间去先下载用户指定需要的内容,然后缓存起来,这样用户下次加载时,就直接从缓存中取出来,效率就快了. 举个例子说明:...
<!...charset=utf-8"><meta http-equiv="X-UA-Compatible" content="IE=Edge"><link rel="dns-prefetch" href="//s1.bdstatic.......
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. ...
运行时优化 1、使用v-if代替v-show 两者的区别是:v-if不渲染DOM,v-show会预渲染DOM 除以下情况使用v-show,其他情况尽量使用v-if 有预渲染需求 需要频繁切换显示状态 2、v-for必须加上key,并避免同时使用v-if ...