如何使用javascript在浏览器中测试从用户到服务器的延迟？

我想使用我网站的访问者收集一些信息。
我需要的是让每个访问者ping 3个不同的主机名，然后将以下信息保存到数据库中

Visitor IP, latency 1,latency 2, latency 3

当然，一切都必须对来访者透明，不以任何方式打断他。 这可能吗？你能给我举个例子吗？是否有jQuery插件或其他更简单的插件

编辑

这是我目前掌握的数据，但数据太随机了。它从50跳到190，使用jQuery，您可以：

---

$.ajax（url，设置）

（）并从发送前的

和通过
Date（）完成的
中抽出时间。现在（）
，减去这些时间->然后你就有时间请求了（当然不是“Ping”）
这可能会让你觉得更痛苦

第一个问题是Javascript没有ping。Javascript最擅长的是HTTP和一些同类协议

第二个问题是，您不能只发出一些ajax请求并对结果计时（这太明显了）。这将阻止您使用ajax与页面所在服务器以外的服务器进行通信。您需要使用JSONP，或者更改图像标记的src，或者其他更间接的方法

第三个问题是，您不想做任何会导致返回大量数据的事情。您不希望数据传输时间或大量的服务器处理干扰测量延迟

第四，您不能请求可能被缓存的URL。如果对象恰好在缓存中，您将获得非常低的“延迟”测量值，但这没有意义

我的解决方案是使用一个没有
src
属性的图像标签。加载文档时，将
src
设置为指向有效服务器，但使用无效端口。通常，服务器简单地拒绝您的连接比生成正确的404错误响应要快。然后，您所要做的就是测量从映像中获取错误事件所需的时间

发件人：

这项技术或许可以改进。以下是一些想法：

使用IP地址而不是DNS主机名
重复“ping”几次，去掉最高和最低的分数，然后平均剩下的分数
如果你的网页有很多繁重的处理，试着在你认为UI负载最轻的时候进行测试
2021年：

为我正在构建的React应用程序再次尝试此操作。我认为准确度不太高

const ping = () => {
    var start = new Date().getTime();
    api.get('/ping').then((res) => {
        console.log(res)
        var end = new Date().getTime();
        console.log(`${end-start} ms`)
    }, (err) => {
        console.log(err)
    })
};

我自己编写了一个小API，但我想在请求过程中发生的事情太多了

在终端，我得到了大约23毫秒的ping到我的服务器。。使用此方法，它的响应时间可达200-500毫秒。
请注意，如果需要DNS查找，此方法将遇到额外的延迟（不确定问题是否应将DNS查找时间作为延迟的一部分，如果适用）。我尝试了此方法，但数据太随机。我添加了一个演示，你可以签出你的小提琴最终缓存了js文件，你应该这样做以防止缓存：我得到相同的随机数据，我认为这不起作用。如果您查看Chrome中的开发工具，您将看到请求被取消。您不能向其他主机发出Ajax调用。（事实上，有些浏览器允许您这样做，但您必须设置正确的参数。即使如此，有些浏览器根本不允许跨源请求。）很好，但我不确定我是否可以使用这个。要求HTML内容不是senario的最佳案例。这是我目前掌握的数据，但数据太随机了。它从50跳到190，你不明白。关键是查询一个将拒绝您的连接的端口。不需要HTML内容。事实上，您根本不需要任何内容。您的代码需要一个名为junkOne的元素。我希望不用它也能工作是的，但这是必要的。可以隐藏该元素。仅仅因为您正在使用它并不意味着您必须显示它。@slashingweapon我修复了您的答案，以便它能够实际工作：最好使用标准web服务器端口，在大多数情况下，该端口将为404。您的示例仅在web服务器处理端口8886并快速拒绝它时有效，但使用无效端口会触发较长的浏览器超时，因此根本不准确。
const ping = () => {
    var start = new Date().getTime();
    api.get('/ping').then((res) => {
        console.log(res)
        var end = new Date().getTime();
        console.log(`${end-start} ms`)
    }, (err) => {
        console.log(err)
    })
};