zoukankan      html  css  js  c++  java
  • 如何获取浏览器的DNS解析时间

    首先看原理:

    a <= <random number>
     
    t1  http://a-doppler.facebook.com/test_pixel?HTTP1.0&t=1&size=0k
    t2  http://a-doppler.facebook.com/test_pixel?HTTP1.1&t=2&size=0k
    t3  http://a-doppler.facebook.com/test_pixel?HTTP1.1&t=3&size=0k
    t4  http://a-doppler.facebook.com/test_pixel?HTTP1.1&t=4&size=10k
     
    t1 = DNS + New Connection +RTT
    t2 = New Connection + RTT
    t3 = RTT
    10k /(t4–t3)~TCP bandwidth
     
    来源:《MobilePerformanceVelocity2011.pdf》 by DavidWei.

    这方案有两个关键点:

    1、为了避免各种DNS缓存,每组请求必须用一个从来没被用过的全新N级域名。这就要求你的域名支持泛解析。例如我为了这个实践,开了*.qgy18.com的解析。

    2、每组的第一个请求响应必须以HTTP/1.0返回。我开始还没注意这个,经aoao提醒才明白,这样才可以确保后面的请求会重建Connection。

    t2 和t1指向同一个域名,且都需要重新建立连接,所以t2-t1是DNS解析时间;t2返回Connection: Keep-Alive,t3是在Keep-Alive指定的timeout时间内发起的新请求,且返回内容为空,所以是RTT(Round-Trip Time);t4在t3的基础上只是把返回内容大小由0k变成10k,所以t4-t3是加载这10k资源花费的时间,这就可以得到网络带宽了。为了减少网 络波动,也可以多测几次取平均值。

    明白了原理就好办了,剩下的几行代码相信大家都会写,略过。

    相比Navigation Timing提供的统计,这种方法好处是兼容绝大部分浏览器,没有浏览器实现上的差异和bug,能较准确的反应浏览器查询DNS所花费的时长;缺点是部署起来比较麻烦。

  • 相关阅读:
    说一说前端路由与后端路由的区别
    HTTP 8种请求方式介绍
    JavaScript 运行机制以及Event Loop(事件循环)
    常见的数据结构
    JS中常见的几种继承方法
    JS异步编程
    js中的数据类型,以及如何检测数据类型
    js面试题之手写节流函数和防抖函数
    前端面试题
    (八) SpringBoot起飞之路-整合Shiro详细教程(MyBatis、Thymeleaf)
  • 原文地址:https://www.cnblogs.com/shihao/p/2318797.html
Copyright © 2011-2022 走看看