`
冷蛋蛋
  • 浏览: 3009 次
社区版块
存档分类
最新评论

dns-prefetch介绍

阅读更多

对于网站访问速度,我们永远不满足,就包括我也一样,从优化角度来说,我  网站优化  的速度还算不错。但是这还是不够,下面来介绍下   dns-prefetch  。

dns-prefetch介绍

DNS解析场景

    我之前讲解过很多大型的网站,都会用NCDN域名来做图片、静态文件等资源访问。比如新浪,我们经常会看到有下列域。

   img1.sina.com.cnimg2.sina.com.cnimg3.sina.com.cnimg4.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 

 

  • 大小: 55 KB
  • 大小: 76.3 KB
  • 大小: 26.1 KB
分享到:
评论

相关推荐

    详解HTML标签属性link rel="dns-prefetch"是什么意思? DNS Prefetch有什么用处?

    详解HTML标签属性link rel="dns-prefetch"是什么意思? DNS Prefetch有什么用处?

    HTML5的<link rel="dns-prefetch"标签是干什么用的

    HTML5的&lt;link rel="dns-prefetch"标签是干什么用的

    dns-prefetch是什么 前端优化:DNS预解析提升页面速度

    &lt;meta http-equiv="x-dns-prefetch-control" content="on"&gt; ``` 然而,需要注意的是,过度使用DNS Prefetch可能导致不必要的DNS查询,增加网络流量,甚至可能对某些浏览器(如Chrome和Firefox 3.5)的性能产生负面...

    dns预请求,提高SPA应用首屏渲染性能

    &lt;meta http-equiv="x-dns-prefetch-control" content="on"&gt; &lt;link rel="dns-prefetch" href="//www.zhix.net"&gt; &lt;link rel="dns-prefetch" href="//api.share.zhix.net"&gt; &lt;link rel="dns-prefetch" href="//bdimg....

    gb2312.enc

    &lt;link rel="dns-prefetch" href="https://assets-cdn.github.com"&gt; &lt;link rel="dns-prefetch" href="https://avatars0.githubusercontent.com"&gt; &lt;link rel="dns-prefetch" href=...

    browsertunnel:通过DNS秘密地从浏览器中窃取数据

    这是一种古老的技术-DNS隧道本身可以追溯到90年代, 在2016年写过关于使用dns-prefetch的信息,但据我所知,browsertunnel是第一个开放源代码,可用于生产的客户端展示其用途。 由于dns-prefetch不会将任何数据返回...

    06-defer和async.md

    面试官可能通过具体问题来考察面试者是否了解现代浏览器的页面加载优化策略,包括但不限于`defer`、`async`、`preload`、`prefetch`、`dns-prefetch`和`preconnect`。 除了这些知识点,文档还强调了现代前端工程师...

    preconnect-cli:生成DNS预解析、预连接HTML的脚手架工具

    link rel="dns-prefetch" href="//qq.com"&gt; &lt;link rel="preconnect" href="//qq.com" crossorigin&gt; &lt;link rel="dns-prefetch" href="//baidu.com"&gt; &lt;link rel="preconnect" href="//baidu....

    3.项目的上线过程二期整理中1

    首先,DNS-prefetch配置是提升页面加载速度的一个手段。在`layout/head-common.html`中添加`&lt;link rel="dns-prefetch"&gt;`标签可以预解析DNS,使得浏览器在实际请求资源前就完成DNS解析,从而减少页面加载的时间。例子...

    javascript使用call调用微信API

    代码很简单,只是给大家一个思路的,这里就不多...link rel=”dns-prefetch” href=”http://mmbiz.qpic.cn”&gt; &lt;link rel=”dns-prefetch” href=”http://res.wx.qq.com”&gt; &lt;meta name=”viewport” cont

    详解HTML5中rel属性的prefetch预加载功能使用

    此外,除了`prefetch`,还有DNS预解析(`dns-prefetch`),它用于提前解析页面中引用的域名,减少DNS查找时间。例如: ```html &lt;link rel="dns-prefetch" href="http://example.com"&gt; ``` 这样在用户实际请求资源...

    Edotensei::waxing_crescent_moon::fire:即时(Browser)简单加载HTML(AssetsResources)。 零依赖

    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

    百度主页代码

    * `&lt;link rel="dns-prefetch" href="//s1.bdstatic.com/"&gt;`:使用DNS预解析技术,预解析指定域名的DNS记录,以提高页面加载速度。 * `&lt;link rel="dns-prefetch" href="//t1.baidu.com/"&gt;`:预解析腾讯云的DNS记录,...

    nuxt-helmet:Nuxt的头盔

    默认情况下, 将设置X-DNS-Prefetch-Control , X-Frame-Options , Strict-Transport-Security , X-Download-Options , Expect-Ct , Referrer-Policy和X-Content-Type-Options标头。 此外,该模块还将默认设置X...

    浏览器的加载与页面性能优化

    开发者可以通过在HTML中添加`&lt;link rel="dns-prefetch" href="//HOSTNAME.com"&gt;`标签,或者利用HTTP头`X-DNS-Prefetch-Control`来引导浏览器进行DNS预解析,从而进一步加速页面加载。 此外,CDN的合理部署也是提升...

    ember-cli-headroom:用于将内容添加到 index.html 头部的 ember-cli 插件

    link rel =" dns-prefetch " href =" //google.com " &gt;&lt; link rel =" prefetch " href =" //google.com/index.html " &gt;&lt; link rel =" prerender " href =" //google.com/index.html " &gt;&lt; meta ...

    .com

    &lt;meta http-equiv="x-dns-prefetch-control" content="on"&gt; &lt;link rel="dns-prefetch" href="http://example.com" /&gt; ``` 总的来说,.com在互联网世界中扮演着至关重要的角色,既是网站标识的一部分,也是HTML链接...

    rails_parse_head:解析head元素(https:developer.mozilla.orgen-USdocsWebHTMLElementhead)

    RailsParseHead RailsParseHead是一个简单的Ruby库,用于解析网站中的head元素信息。 在以下位置了解有关head元素的更多信息: 安装将此行... links # =&gt; [{:rel=&gt;"dns-prefetch", :href=&gt;"https://github.githubasse

Global site tag (gtag.js) - Google Analytics