最近一个小需求,需要在一个系统里加一个页面,页面里的表格显示 当前用户访问某几个网站时的网络延迟情况。类似如下的表格:
实现思路:因为几个网址都是公司自己使用的,所以可以在域名对应的服务器里存放一张很小的 gif 图片。请求这张图片,记录图片开始请求的时间和接收完成的时间,减去后的差值就能作为网络延迟的考量。
实现:
- 维护一个数组存放待检测的域名
- 遍历数组,有多少个域名就
new Image()
多少个图片,同时给img
对象加上startTime
,endTime
等属性。 - 给
img
绑定onload
和onerror
事件,在图片接收完成后获取当前时间戳。 - 将对象传入一个类似
getImage()
的函数,在函数中给img
的src
赋值,同时将当前时间赋值给startTime
,这样就能在onload
触发时减去图片接收完成的时间。 - 如果要轮询,可以加一个
setTimeout
,在里面再次调用getImage()
,时间间隔就是轮询的间隔。 - 修改对应的dom上数值。
网友评论