展开

关键词

DNS Prefetch初认识

今天在看一个后台框架时,发现这样的代码:  赶紧搜索了一下,DNS Prefetch也就是DNS预获取,是前端DNS优化中的其中一点,另外一点嘛,就是减少DNS查询的次数。 Prefetch。 如果想对页面中没有出现的域进行预获取,那么就要使用显示的DNS Prefetch了,也就是使用link标签。 现在大多数新浏览器已经针对DNS解析进行了优化,典型的一次DNS解析耗费20-120 毫秒,减少DNS解析时间和次数是个很好的优化方式。 在页面header中使用link标签来强制对DNS预解析: 注:dns-prefetch需慎用,多页面重复DNS预解析会增加重复DNS查询次数。

1.1K90

Dns-prefetch丨细节提升页面载入速度!

什么是Dns-prefetchDNS Prefetch,即DNS预获取,是前端优化的一部分。 默认情况下浏览器会对页面中和当前域名(正在浏览网页的域名)不在同一个域的域名进行预获取,并且缓存结果,这就是隐式的 DNS Prefetch。 如果想对页面中没有出现的域进行预获取,那么就要使用显示的 DNS Prefetch 了。 DNS Prefetch 能够加快页面的解析速度,但是也不能滥用,因为有开发者指出 禁用DNS 预读取能节省每月100亿的DNS查询 。 如果需要禁止隐式的 DNS Prefetch,可以使用以下的标签: 不过前提当然是你有这个资本让人引用,否则加上就是多此一举!

77940
  • 广告
    关闭

    腾讯云域名特惠,新用户抢购首年只需1元

    腾讯云域名专场特惠,新用户注册.xyz仅1元/年,注册.com仅23元/年。腾讯云新老用户都可购买,每个用户限购5个,点击了解详情…

  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    DNS预解析什么?dns-prefetch对网站速度又能提升有多少?

    DNS prefetch,是一种DNS 预解析技术,当浏览网页时,浏览器会在加载网页时对网页中的域名进行解析缓存,这样在单击当前网页中的连接时就无需进行DNS的解析,减少用户等待时间,提高用户体验。 如果要控制浏览器端是否对域名进行预解析,可以通过Http header 的x-dns-prefetch-control 属性进行控制。 DNS Prefetch 应该尽量的放在网页的前面,推荐放在后面。注:dns-prefetch需慎用,多页面重复DNS预解析会增加重复DNS查询次数。 需要注意的是,虽然使用 DNS Prefetch 能够加快页面的解析速度,但是也不能滥用,因为有开发者指出 禁用DNS 预读取能节省每月100亿的DNS查询 。 那么DNS prefetch会影响的是Page Load Time。当然,分析各个request的DNS 解析时间会更直接(可以用WebPageTest)。

    52520

    优秀的网站都用了这几个属性

    二、prefetch 与preload不同,prefetch是一个低优先级的资源提示,它的作用是告诉浏览器加载可能会用到的资源,比如其他网页、继续滚动才会加载的资源等等。 prefetchprefetchdns-prefetch两种1. prefetch 提前加载未来可能会用到的资源,浏览器将会在空闲时获取资源,获取完成后,将会存储在浏览器缓存中,等到真正使用时,直接从内存中读取即可 2. dns-prefetch 标识了dns-prefetch的资源,在真正获取之前,将会提前进行dns解析,可以加快请求的速度。一般dns-prefetch针对的是跨域资源,同域资源其实是无效的。 道理也很简单,同域的资源在请求html页面的时候已经解析完成了,所以dns-prefetch一般用于CDN、以及请求第三方资源,比如google font、google analytics等。 可以理解为preconnect是升级版的dns-prefetch,预执行更多动作,同时也消耗更多的性能,请谨慎使用。

    6730

    DNS预解析详解

    使用X-DNS-Prefetch-Control 头控制着浏览器的DNS预解析功能X-DNS_prefetch-Control: on|offon:启用DNS预解析。 浏览器支持链接:http:caniuse.com#feat=link-rel-dns-prefetch? 示例打开和关闭DNS预读取你可以通过在服务器端发送 X-DNS-Prefetch-Control 报头,或是在文档中使用值为 http-equiv 的标签: 1 强制查询特定主机名你可以通过使用 rel 属性值为 link type 中的 dns-prefetch 的 标签来对特定域名进行预读取: 1 在这个例子中,Firefox将预解析域名”www.xuanfengge.com”。 C) Manual opt-out: Dont prefetch domain resolution D) Already opted out: Dont prefetch domain resolution

    1.2K40

    什么是 Preload、Prefetch 和 Preconnect?

    有三种不同的 prefetch 的类型,link,DNS 和 prerendering,下面来详细分析。 DNS Prefetching DNS prefetching 允许浏览器在用户浏览页面时在后台运行 DNS 的解析。如此一来,DNS 的解析在用户点击一个链接时已经完成,所以可以减少延迟。 可以在一个 link 标签的属性中添加 rel=dns-prefetch 来对指定的 URL 进行 DNS prefetching,我们建议对 Google fonts,Google Analytics DNS 请求在带宽方面流量非常小,可是延迟会很高,尤其是在移动设备上。通过 prefetching 指定的 DNS 可以在特定的场景显著的减小延迟,比如用户点击链接的时候。 DNS prefetch 已经被除了 Opera Mini 之外的所有现代浏览器支持了。(译者注,下图是 2018 年 7 月末浏览器对 DNS-prefetch 的支持情况)?

    1.7K10

    Resource Hints 知多少

    而就基于这点上,可以使用 preconnect 或者 dns-prefetch 进行优化,而它两又是什么呢?怎么使用呢? dns-prefetch通常我们记住一个网站都是通过它的域名,但是对于服务器来说,它是通过 IP 来记住它们的。 浏览器使用 DNS 来将站点转成 IP 地址,这个是建立连接的第一步,而这一步骤通常需要花费的时间大概是 20ms ~ 120ms。因此,可以通过 dns-prefetch 来节省这一步骤的时间。 居然能通过 preconnect 来减少整个建立连接的时间,那为什么还需要 dns-prefetch 来减少建立连接中第一步 DNS 查找解析的时间呢? 可以按照如下方式配置 dns-prefetch: 另外由于 preconnect 的浏览器兼容稍微比 dns-prefetch 低,看下图:??

    10720

    WordPress头部去除window._wpemojiSettings代码

    remove_filter( wp_mail, wp_staticize_emoji_for_email); 在处理这个问题的时候,无意中看到有人提到另一个问题,查看网页源码中有下面这句: link rel=dns-prefetch href=s.w.org; 在头部添加了dns-prefetch,从s.w.org预获取表情和头像,但s.w.org国内根本无法访问,应该一点用都没有,也可以禁用它,同样,也是通过在主题的functions.php ( wp_head, wp_resource_hints, 2 ); 方法二 function remove_dns_prefetch( $hints, $relation_type ) {if ( dns-prefetch

    14720

    网页页面下各种标签的含义

    postcomment=true像上面的状况,我们只需要在网址的 head 区域添加如下代码: 这样的话 Google 等搜索引擎最终都会只收录 canonical 标签指定的这个网址4、dns-prefetch :做DNS预获取提高前端性能,另外一点,就是减少DNS查询的次数加快网页访问速度。 默认情况下浏览器会对页面中和当前域名(正在浏览网页的域名)不在同一个域的域名进行预获取,并且缓存结果,这就是隐式的DNS Prefetch。 如果想对页面中没有出现的域进行预获取,那么就要使用显示的DNS Prefetch了,也就是使用link标签: 注:dns-prefetch需慎用,多页面重复DNS预解析会增加重复DNS查询次数5、keywords

    14610

    网页页面下各种标签的含义

    postcomment=true像上面的状况,我们只需要在网址的 head 区域添加如下代码: 这样的话 Google 等搜索引擎最终都会只收录 canonical 标签指定的这个网址4、dns-prefetch :做DNS预获取提高前端性能,另外一点,就是减少DNS查询的次数加快网页访问速度。 默认情况下浏览器会对页面中和当前域名(正在浏览网页的域名)不在同一个域的域名进行预获取,并且缓存结果,这就是隐式的DNS Prefetch。 如果想对页面中没有出现的域进行预获取,那么就要使用显示的DNS Prefetch了,也就是使用link标签: 注:dns-prefetch需慎用,多页面重复DNS预解析会增加重复DNS查询次数5、keywords

    8510

    前端优化汇总,到底该不该做?

    一个是部署拆分,一个是请求减少,没毛病哦; 首先我们来了解一下http的请求过程(简单通俗的阐述一下): DNS 域名解析 - 1. 、 避免重定向,尽量减少 iframe 使用,它会阻塞主页面的渲染; 9、 避免使用CSS Expression(css表达式)又称Dynamic properties(动态属性); 10、 合理使用dns-prefetchprefetch、 preload、 defer、async: dns-prefetch:使用dns-prefetch对项目中用到的域名进行 DNS 预解析,减少 DNS 查询,如: ;BAT各大巨头都是这么干的 ,请看下图,dns的详细解析过程今天先不讲了,码字码不动了,写分享比加班做项目还累,望体谅~; prefetch: 它是一个优先级非常低的资源加载标识,浏览器会在空闲时(即主进程资源加载完成后)下载带有 prefetch标识的资源并缓存到disk,在后续模块使用到这个文件的时候,会直接从缓存读取;该功能webpack有个插件,配置后编译能自动插入到页面上; preload:没错,它就是一个可以预加载资源的属性

    28660

    前端基础实战(MBP 环境)node.jssublimechrome代理神器npm

    dns-prefetch接着执行 webpack 进行打包

    42240

    从输入一个URL到页面完全显示发生了什么?

    ----大致步骤如下:1.域名解析浏览器查找域名的IP地址,这一步包括DNS的具体查找过程,DNS属于应用层协议。 客户端会检查本地是否有对应的IP地址,若存在则返回,否则请求上级DNS服务器,一直到找到为止或者最终到根节点。 显然这一过程可能非常耗时,所以很多网站都会采用dns-prefetch,使浏览器在空闲时间就将这些域名转化为ip地址,这样就能有效减少时间。以淘宝网为例:? 其实DNS的查找过程包括:浏览器缓存-》系统缓存-》路由器缓存...2.TCP三次握手,客户端向服务器发送http请求服务器可能会有永久服务器重定向相应,客户端随之继续追踪重定向地址。

    20000

    从输入一个URL到页面完全显示发生了什么?

    cnblogs.comblog882926201711882926-20171127181032128-471806615.pngimage.png ----大致步骤如下:1.域名解析浏览器查找域名的IP地址,这一步包括DNS 的具体查找过程,DNS属于应用层协议。 客户端会检查本地是否有对应的IP地址,若存在则返回,否则请求上级DNS服务器,一直到找到为止或者最终到根节点。 显然这一过程可能非常耗时,所以很多网站都会采用dns-prefetch,使浏览器在空闲时间就将这些域名转化为ip地址,这样就能有效减少时间。 以淘宝网为例: image.png 其实DNS的查找过程包括:浏览器缓存-》系统缓存-》路由器缓存...2.TCP三次握手,客户端向服务器发送http请求服务器可能会有永久服务器重定向相应,客户端随之继续追踪重定向地址

    28220

    快速优化 Web 性能的10 个手段

    该规范定义了四个原语:preconnect(预连接)dns-prefetchDNS 预取)prefetch(预取)prerender(预渲染)另外,关于资源提示,我们将 preload 关键字用于 link dns-prefetch如果你想告诉浏览器将要建立与非关键域的连接,则可以用 dns-prefetch 进行预连接。这大约能够为你节省 20–120 毫秒。 prefetch使用预取,你可以告诉浏览器下载链接标记中所指的整个网站。你可以预取页面或资源。预取在加快网站速度方面非常有用,但是要注意有可能降低网站速度的情况。

    15130

    漫谈前端优化

    http请求,全局使用,缓存一切可缓存的资源文件;  ·外联式引用资源,主要是为了页面缓存考虑;  ·资源文件放在同一个服务器,避免调用第三方资源,万一挂了那(常见的是各种不靠谱的CDN,泪目中); ·dns-prefetch ,把这个放这里不知道合适不合适,这个应该算是http请求方面的优化,不知道什么是dns-prefetch是什么的自行谷歌之,俗名叫dns预获取,主要作用是减少请求次数和提前对dns预获取(废话),什么意思那 ,简单的说你的站点域名是x.com,而你网站上一些的图片等资源是放在img.x.com上,每次请求会涉及到dns解析问题,对于性能要求极致的站点这个处理就必不可少,在head中加入就能达到上述的效果,需要注意 ,虽然dns-prefetch能够加快网页解析速度,但是也不能随便滥用,因为多页面重复DNS预解析会增加重复DNS查询的次数; 2.css&javascript内容优化:  ·css引用写在头部,javascript

    45790

    性能知识点二

    preconnect用于启动预链接,其中包含DNS查找,TCP握手,以及可选的TLS协议,允许浏览器减少潜在的建立连接的开销。 Prefetch用于标识下一个导航可能需要的资源。 dns-prefetch可以指定一个用于获取资源所需的源(origin),并提示浏览器应该尽可能早的解析。 prerender用于标识下一个导航可能需要的资源。

    10620

    window.performance 网页性能计算

    比如,http:example.com 就不该写成 http:example.com times.redirect = t.redirectEnd - t.redirectStart; 【重要】DNS 查询时间 【原因】DNS 预加载做了么? 可使用 HTML5 Prefetch 预查询 DNS ,见:(http:segmentfault.coma1190000000633364) times.lookupDomain = t.domainLookupEnd times.loadEvent = t.loadEventEnd - t.loadEventStart; DNS 缓存时间 times.appcache = t.domainLookupStart -

    85840

    前端性能优化

    Link标签的妙用 prefetch DNS解析的预加载: proload 脚本预加载,在浏览器空闲时加载:1、preload和prefetch的本质都是预加载,即先加载、后执行,加载与执行解耦。 2、preload和prefetch不会阻塞页面的onload。 3、preload用来声明当前页面的关键资源,强制浏览器尽快加载;而prefetch用来声明将来可能用到的资源,在浏览器空闲时进行加载。 资源加载优化DNS优化 dns-perfetch是一种浏览器机制,其利用浏览器空闲时间来下载或预取用户在不久的将来可能访问的文档。 大中小图片方案及图片压缩屏蔽开发时的调试、日志代码其他层级优化从输入一个URL到页面出现的过程(性能优化即是优化这些过程) DNS解析,把域名转成IP的过程 浏览器向目标主机发出请求 HTTPHTTPS

    14110

    WordPress 4.6正式版“Pepper”上线发布

    —— WordPress 4.6对开发者的改进—— Resource Hints资源提示(Resource Hints)是一项比较新的W3C规范,定义了HTML中链接元素的DNS解析预读取(dns-prefetch ),预链接(preconnect),预读取(prefetch),预渲染(prerender)关系。 允许浏览器预读取特定页面,在后台进行渲染,执行DNS查询,或者在后台进行连接握手(DNS,TCP,TLS)。—— HTTP API 内部改动HTTP API经历了较大的内部改进。

    11710

    相关产品

    • 云服务器

      云服务器

      腾讯云服务器(CVM)为您提供安全可靠的弹性云计算服务。只需几分钟,您就可以在云端获取和启用云服务器,并实时扩展或缩减云计算资源。云服务器 支持按实际使用的资源计费,可以为您节约计算成本。

    相关资讯

    热门标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      扫码关注云+社区

      领取腾讯云代金券