美文网首页
利用一张图片检测网络延迟

利用一张图片检测网络延迟

作者: 般犀 | 来源:发表于2019-03-11 00:02 被阅读0次

    最近一个小需求,需要在一个系统里加一个页面,页面里的表格显示 当前用户访问某几个网站时的网络延迟情况。类似如下的表格:


    实现思路:因为几个网址都是公司自己使用的,所以可以在域名对应的服务器里存放一张很小的 gif 图片。请求这张图片,记录图片开始请求的时间和接收完成的时间,减去后的差值就能作为网络延迟的考量。

    实现:

    • 维护一个数组存放待检测的域名
    • 遍历数组,有多少个域名就new Image()多少个图片,同时给 img对象加上startTime,endTime等属性。
    • img绑定onloadonerror事件,在图片接收完成后获取当前时间戳。
    • 将对象传入一个类似getImage()的函数,在函数中给imgsrc赋值,同时将当前时间赋值给startTime,这样就能在onload触发时减去图片接收完成的时间。
    • 如果要轮询,可以加一个setTimeout,在里面再次调用getImage(),时间间隔就是轮询的间隔。
    • 修改对应的dom上数值。

    相关文章

      网友评论

          本文标题:利用一张图片检测网络延迟

          本文链接:https://www.haomeiwen.com/subject/hvympqtx.html