• DNS预解析 dns-prefetch


    1、DNS 是什么?

      Domain Name System,域名系统,作为域名和IP地址相互映射的一个分布式数据库。

      DNS大家都懂,那么浏览器访问域名的时候,是需要去解析一次DNS,也就是把域名 google.com解析到对应的ip地址上,修改本机hosts就是主动的影响DNS解析。
      既然要解析就会损耗时间,对于前端特别是移动端而言,分秒必争,所以浏览器厂商-Chrome最想搞了这个新功能。
      定义--浏览器根据自定义的规则,提前去解析后面可能用到的域名,来加速网站的访问速度。
      DNS Prefetching作用和原理就是提前解析域名,以免延迟

    2、如何使用 DNS Prefetching?

      使用方式

      DNS Prefetch 应该尽量的放在网页的前面,推荐放在 <meta charset="UTF-8"> 后面。

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

      <link rel="dns-prefetch" href="[//host_name_to_prefetch.com](http://the_worlds_best_vendor.com/)">
      实例
      <link rel="dns-prefetch" href="//www.gome.com.cn/"> 

    3、DNS Prefetching的优势

      DNS Prefetching是提前加载域名解析的,省去了解析时间。

      a标签的href是可以在chromefirefox包括高版本的IE,但是在HTTPS下面不起作用,需要meta来强制开启功能
      这是DNS的提前解析,并不是cssjs之类的文件缓存,大家不要混淆了两个不同的概念。
      如果直接做了js的重定向,或者在服务端做了重定向,没有在link里面手动设置,是不起作用的。

      这个对于什么样的网站更有作用--- 类似taobao这种网站,你的网页引用了大量很多其他域名的资源,如果你的网站,基本所有的资源都在你本域名下,那么这个基本没有什么作用。因为DNS Chrome在访问你的网站就帮你缓存了。

    4、功能的有效性

      如果本地就有缓存,那么解析大概是0~1ms,如果去路由器查找大概是15ms,如果当地的服务器,一些常见的域名可能需要150ms左右,不常见的可能要1S以上。

      DNS解析的包很小,因为DNS是分层协议的,不需要跟http协议一样,一个UDP的包就ok,大概100bytes,快速。

      本机的DNS缓存是有限,例如XP大概50200个域名,所以Chrome这里做了优化,会根据你的网站访问频率,来保证你常用的网站的DNS都能被缓存住。

      以下两个命令在chrome的地址栏输入查看:
        "about:histograms/DNS" and "about:dns"

      正确的使用方式:
      1.对静态资源域名做手动dns prefetching 
      2.js里会发起的跳转、请求做手动dns prefetching 
      3.不用对超链接做手动dns prefetching,因为chrome会自动做dns prefetching 
      4.对重定向跳转的新域名做手动dns prefetching,比如:页面上有个A域名的链接,但访问A会重定向到B域名的链接,这么在当前页对B域名做手动dns prefetching是有意义的。

    5、其他

      1.假设页面Head里面有个css链接, 在当前页的Head里加上对应的手动dns prefetchinglink标签,实际上并没有好处。

      2.普遍来说合理的dns prefetching能对页面性能带来50ms ~ 300ms的提升,有人做了这方面的统计。

      3.chromium的官方文档所说,dns prefetching的网络消耗是极低极低的:
      Each request typically involves sending a single UDP packet that is under 100 bytes out, and getting back a response that is around 100 bytes. This minimal impact on network usage is compensated by a significant improvement in user experience.

      4.chromium的官方文档所说,chrome使用8个线程专门做dns prefetching 而且chrome本身不做dns记录的cache,是直接从操作系统读dns --直接修改系统的dns记录或者host会直接影响chrome

      5.手动dns prefetching的代码实际上还是会增加html的代码量的,特别是域名多的情况下。 
      所以,最优的方案应该是:通过js初始化一个iframe异步加载一个页面,而这个页面里包含本站所有的需要手动dns prefetching的域名。

     参考自:https://www.cnblogs.com/zdz8207/p/seo-DNS-Prefetching.html

  • 相关阅读:
    《编写可维护的JavaScript》之编程实践
    CSS基础知识之float
    tab.js分享及浏览器兼容性问题汇总
    CSS基础知识之position
    样式布局分享-基于frozen.js的移动OA
    DoNet开源项目-基于jQuery EasyUI的后台管理系统
    DoNet开源项目-基于Amaze UI的点餐系统
    DSOframer 微软官方API的查阅方法
    DSOframer 的简单介绍和资源整理
    2015-新的阻力,新的努力
  • 原文地址:https://www.cnblogs.com/yuxingyoucan/p/9168290.html
Copyright © 2020-2023  润新知